Vue2.0에서 사용자 권한 제어 구현

이 글은 주로 Vue2.0 사용자 권한 제어 솔루션의 예시를 소개하고 있습니다. 편집자는 꽤 좋다고 생각하여 지금부터 공유하고 참고용으로 제공하겠습니다.

Vue-Access-Control은 Vue/Vue-Router/axios 기반의 프론트 엔드 사용자 권한 제어 솔루션으로, 라우팅, 보기, 요청의 세 가지 수준을 제어합니다. 개발 사용자는 사용자 권한 제어를 임의적으로 세분화할 수 있습니다.

설치

버전 요구 사항

1. Vue 2.0x

2. Vue-router 3.x

Get

git: git clone https://github.com /타워1 229/ Vue -Access-Control.git

npm: npm i vue-access-control

Run

//开发
npm run dev

//构建
npm build

Overview

전체 아이디어

세션 시작 시 Vue 인스턴스를 다음과 같이 초기화합니다. 로그인 라우팅, 루트 구성 요소의 생성된 후크에 있는 로그인 페이지로 경로를 지정합니다. 사용자가 성공적으로 로그인한 후 프런트 엔드는 사용자 토큰을 가져오고 axios 인스턴스를 설정하여 {"Authorization":token}을 균일하게 추가합니다. 사용자 인증을 구현하기 위해 헤더를 요청한 다음 현재 사용자의 권한을 얻습니다. 데이터에는 주로 라우팅 권한과 리소스 권한이 포함됩니다. 그런 다음 경로가 동적으로 추가되고 메뉴가 생성되며 권한 지침과 전역 권한 확인 방법이 구현되고 요청 인터셉터가 생성됩니다. axios 인스턴스에 대한 추가가 완료되면 권한 제어 초기화가 완료됩니다. 경로를 동적으로 로드한 후 라우팅 구성 요소가 로드되고 렌더링된 다음 프런트 엔드 인터페이스가 표시됩니다.

브라우저 새로 고침 경로 재설정 문제를 해결하려면 토큰을 얻은 후 이를 sessionStorage에 저장해야 합니다. 루트 구성 요소의 생성된 후크는 토큰이 있는지 여부를 로컬에서 확인하는 역할을 합니다. 로그인 없이 토큰을 직접 사용하여 권한을 얻고 초기화할 수 있습니다. 토큰이 유효하고 현재 경로에 액세스 권한이 있는 경우 라우팅 구성 요소가 로드되고 현재 경로에 액세스 권한이 없으면 올바르게 표시됩니다. 라우팅 설정에 따라 404로, 토큰이 유효하지 않은 경우 백엔드는 4xx 상태 코드를 반환해야 하며 프런트엔드는 axios 인스턴스로 통합되어야 합니다. 오류 인터셉터를 추가하고 4xx 상태 코드가 발생할 때 종료 작업을 실행하고 삭제합니다. sessionStorage 데이터를 삭제하고 로그인 페이지로 이동하여 사용자가 다시 로그인할 수 있도록 합니다.

최소 종속성 원칙

Vue-Access-Control은 Vue/Vue-Router/axios를 제외하고는 다른 종속성이 없으며 권한 제어 요구 사항이 있는 누구에게나 적용될 수 있습니다. Vue 프로젝트에서는 webpack 템플릿을 기반으로 프로젝트가 개발 및 빌드되며 대부분의 새로운 프로젝트는 체크아웃된 코드를 기반으로 직접 개발이 가능합니다. 프로젝트에 도입된 추가 Element-UI 및 CryptoJS는 데모 인터페이스 개발에만 사용되며, 권한 제어와는 아무런 관련이 없습니다. 프로젝트 애플리케이션에서 직접 선택할 수 있습니다.

디렉터리 구조

src/
 |-- api/         //接口文件
 |   |-- index.js       //输出通用axios实例
 |   |-- account.js      //按业务模块组织的接口文件，所有接口都引用./index提供的axios实例
 |-- assets/
 |-- components/
 |-- router/
 |   |-- fullpath.js     //完整路由数据，用于匹配用户的路由权限得到实际路由
 |   `-- index.js      //输出基础路由实例
 |-- views/
 |-- App.vue
 ·-- main.js

데이터 형식 규칙

라우트 권한 데이터는 id와 parent_id가 동일한 두 루트가 상위-하위 관계를 갖는 형식의 객체 배열이어야 합니다. 라우팅 데이터 형식, 라우팅 제어의 관련 구현을 수정해야 합니다. 자세한 내용은 라우팅 제어

[
  {
   "id": "1",
   "name": "菜单1",
   "parent_id": null,
   "route": "route1"
  },
  {
   "id": "2",
   "name": "菜单1-1",
   "parent_id": "1",
   "route": "route2"
  }
 ]

를 참조하세요. 리소스 권한 데이터는 다음 형식의 개체 배열이어야 하며 매개변수가 있는 URL을 지원합니다. 특정 형식 지침은 요청 제어

 [
  {
   "id": "2c9180895e172348015e1740805d000d",
   "name": "账号-获取",
   "url": "/accounts",
   "method": "GET"
  },
  {
   "id": "2c9180895e172348015e1740c30f000e",
   "name": "账号-删除",
   "url": "/account/**",
   "method": "DELETE"
  }
]

를 참조하세요. 라우팅 제어

라우팅 제어에는 경로의 동적 등록과 메뉴의 동적 생성이라는 두 부분이 포함됩니다.

동적 등록 경로

처음에 인스턴스화된 경로에는 로그인과 404 경로만 포함됩니다.

[{
 path: '/login',
 name: 'login',
 component: (resolve) => require(['../views/login.vue'], resolve)
}, {
 path: '/404',
 name: '404',
 component: (resolve) => require(['../views/common/404.vue'], resolve)
}, {
 path: '/',
 name: '首页',
 component: (resolve) => require(['../views/index.vue'], resolve),
 children: [{
  path: '/route1',
  name: '栏目1',
  meta: {
   icon: 'icon-channel1'
  },
  component: (resolve) => require(['../views/view1.vue'], resolve)
 }, {
  path: '/route2',
  name: '栏目2',
  meta: {
   icon: 'ico-channel2'
  },
  component: (resolve) => require(['../views/view2.vue'], resolve),
  children: [{
   path: 'child2-1',
   name: '子栏目2-1',
   meta: {
    
   },
   component: (resolve) => require(['../views/route2-1.vue'], resolve)
  }]
 }]
}, {
 path: '*',
 redirect: '/404'
}]

그런 다음 홈페이지와 해당 하위 경로를 가져와야 합니다. 전체 프로젝트의 전체 라우팅 데이터를 로컬에서 미리 수집한 다음, 사용자 권한을 기반으로 전체 라우팅 데이터를 필터링합니다.

필터링의 구현 아이디어는 먼저 백엔드에서 반환된 라우팅 데이터를 다음 해시 구조로 처리하는 것입니다.

let hashMenus = {
  "/route1":true,
  "/route1/route1-1":true,
  "/route1/route1-2":true,
  "/route2":true,
  ...
}

그런 다음 로컬 전체 경로를 순회하고 루프에서 위 구조의 키 형식에 경로를 연결합니다. , hashMenus[route] 경로가 일치하는지 확인할 수 있습니다. 구체적인 구현은 App.vue 파일의 getRoutes() 메서드를 참조하세요.

백엔드에서 반환된 라우팅 기관 데이터가 계약과 다른 경우 필터링 로직을 직접 구현해야 합니다. 실제 사용 가능한 라우팅 데이터를 얻을 수 있는 한 최종적으로 addRoutes() 메서드를 사용하여 동적으로 추가할 수 있습니다. 404 페이지에 주의하여 일치 항목을 배치해야 합니다.

Dynamic Menu

라우팅 데이터를 사용하여 탐색 메뉴를 생성할 수 있지만 라우팅 데이터는 루트 구성 요소에서 얻고 탐색 메뉴는 index.vue 구성 요소에 존재합니다. 당연히 메뉴 데이터를 에서 공유해야 합니다. 일반적으로 가장 먼저 떠오르는 것은 Vuex이지만 전체 사용자 세션 동안 메뉴 데이터가 변경되지 않습니다. 이는 Vuex에 대한 최선의 사용 시나리오가 아니며 불필요한 것을 최소화하기 위한 것입니다. 종속성이 있으므로 여기서는 가장 좋은 방법을 사용합니다. 간단하고 직접적인 방법은 루트 구성 요소인 data.menuData에 메뉴 데이터를 걸어 두고 this.$parent.menuData를 사용하여 홈페이지에서 가져오는 것입니다.

또한 탐색 메뉴에 열 아이콘을 추가해야 할 수도 있습니다. 예를 들어 아이콘 클래스나 유니코드를 경로 메타에 저장하면 메타데이터가 표시될 수 있습니다. 템플릿에서 액세스됩니다.

在多角色系统中可能遇到的一个问题是，不同角色有一个名字相同但功能不同的路由，比如说系统管理员和企业管理员都有”账号管理”这个路由，但他们的操作权限和目标不同，实际上是两个完全不同的界面，而Vue不允许多个路由同名，因此路由的name必须做区分，但把区分后的name显示在前端菜单上会很不美观，为了让不同角色可以享有同一个菜单名称，我们只要将这两个路由的meta.name都设置成”账号管理”，在模板循环时优先使用meta.name就可以了。

菜单的具体实现可以参考views/index.vue。

视图控制

视图控制的目标是根据当前用户权限决定界面元素显示与否，典型场景是对各种操作按钮的显示控制。实现视图控制的本质是实现一个权限验证方法，输入请求权限，输出是否获准。然后配合v-if或jsx或自定义指令就能灵活实现各种视图控制。

全局验证方法

验证方法的的实现本身很简单，无非是根据后端给出的资源权限做判断，重点在于优化方法的输入输出，提升易用性，经过实践总结最终使用的方案是，将权限跟请求同时维护，验证方法接收请求对象数组为参数，返回是否具有权限的布尔值。

请求对象格式：

//获取账户列表
const request = {
 p: ['get,/accounts'],
 r: params => {
  return instance.get(`/accounts`, {params})
 }
}

权限验证方法$_has()的调用格式：

v-if="$_has([request])"

权限验证方法的具体实现见App.vue中Vue.prototype.$_has方法。

将权限验证方法全局混入，就可以在项目中很容易的配合v-if实现元素显示控制，这种方式的优点在于灵活，除了可以校验权限外，还可以在判断表达式中加入运行时状态做更多样性的判断，而且可以充分利用v-if响应数据变化的特点，实现动态视图控制。

具体实现细节参考基于Vue实现后台系统权限控制中的相关章节。

自定义指令

v-if的响应特性是把双刃剑，因为判断表达式在运行过程中会频繁触发，但实际上在一个用户会话周期内其权限并不会发生变化，因此如果只需要校验权限的话，用v-if会产生大量不必要的运算，这种情况只需在视图载入时校验一次即可，可以通过自定义指令实现：

//权限指令
Vue.directive('has', {
 bind: function(el, binding) {
  if (!Vue.prototype.$_has(binding.value)) {
   el.parentNode.removeChild(el);
  }
 }
});

自定义指令内部仍然是调用全局验证方法，但优点在于只会在元素初始化时执行一次，多数情况下都应该使用自定义指令实现视图控制。

请求控制

请求控制是利用axios拦截器实现的，目的是将越权请求在前端拦截掉，原理是在请求拦截器中判断本次请求是否符合用户权限，以决定是否拦截。

普通请求的判断很容易，遍历后端返回的的资源权限格式，直接判断request.method和request.url是否吻合就可以了，对于带参数的url需要使用通配符，这里需要根据项目需求前后端协商一致，约定好通配符格式后，拦截器中要先将带参数的url处理成约定格式，再判断权限，方案中已经实现了以下两种通配符格式：

1. 格式：/resources/:id
   示例：/resources/1
   url: /resources/**
   解释：一个名词后跟一个参数，参数通常表示名词的id  

2. 格式：/store/:id/member
   示例：/store/1/member
   url：/store/*/member

 解释：两个名词之间夹带一个参数，参数通常表示第一个名词的id
对于第一种格式需要注意的是，如果你要发起一个url为"/aaa/bbb"的请求，默认会被处理成"/aaa/**"进行权限校验，如果这里的”bbb”并不是参数而是url的一部分，那么你需要将url改成"/aaa/bbb/"，在最后加一个”/“表示该url不需要转化格式。

拦截器的具体实现见App.vue中的setInterceptor()方法。

如果你的项目还需要其他的通配符格式，只需要在拦截器中实现对应的检测和转化方法就可以了。

演示及说明

演示说明：

DEMO项目中演示了动态菜单、动态路由、按钮权限、请求拦截。

演示项目后端由rap2生成mock数据，登录请求通常应该是POST方式，但因为rap2的编程模式无法获取到非GET的请求参数，因此只能用GET方式登录，实际项目中不建议仿效；

另外登录后获取权限的接口本来不需要携带额外参数，后端可以根据请求头携带的token信息实现用户鉴权，但因为rap2的编程模式获取不到headers数据，因此只能增加一个”Authorization”参数用于生成模拟数据。

测试账号:

1. 사용자 이름: root
비밀번호: any
2. 사용자 이름: client
비밀번호: any

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

AngularJS에서 라디오를 통해 두 옵션 중 하나를 사용하는 방법(자세한 튜토리얼)

vue에서 cli의 포괄적인 해석(자세한 튜토리얼)

js 상태를 통해 라디오를 동적으로 변경하는 방법 (자세한 튜토리얼)

위 내용은 Vue2.0에서 사용자 권한 제어 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!