# 权限验证

# 权限实现方式

本项目IndexLayout中权限的实现方式分以下内容：

# 菜单的生成

通过获取当前用户的权限去比对路由配置的roles参数，判断当前用户具有的权限，可访问的路由表，动态生成菜单。

# 路由页面访问权限

IndexLayout 中通过 @/components/Permission (opens new window) 组件判断权限进行展示。

# 页面按钮权限

1、页面中的按钮可以通过@/components/Permission (opens new window) 组件验证权限是否展示。
2、页面中的按钮可以通过@/directives/permission (opens new window) 自定义指令验证权限是否展示。

使用样例：代码 (opens new window)，样例 (opens new window)

# 路由`roles`使用方法

# 一、角色类型法：

角色类型法 意思就是：定义几个角色名称然后在定义的路由上写好，请求服务器接口，服务器返回用户的角色类型，如：

[
  {
    title: 'empty',
    path: '/login',
    roles: ['admin','test'],
    component: ()=> import('@/views/user/Login/index.vue')   
  },

  {
    title: 'empty',
    path: '/404',
    roles: ['test'],
    component: ()=> import('@/views/404/index.vue') 
  },
  {
    title: 'empty',
    path: '/home',
    roles: ['admin'],
    component: ()=> import('@/views/home/index.vue')    
  }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

以上定义了两个角色，admin 和 test,当请求用户信息时，服务端可以返回 admin 角色或 test 角色或两个角色都返回；但是这个的话，用户前台把角色类型写死了，后端也就只能定义这两种角色，而且不合理，所以此方法一般不会用到。

# 二、权限列表法：

权限列表法 意思就是：思考的维度可能不一样，把每个路由做一个权限，这样就形成了一个权限路由列表，如：

[
  {
    title: '',
    path: '/login',
    roles: ['login'],
    component: ()=> import('@/views/user/Login/index.vue')  
  },

  {
    title: '',
    path: '/404',
    roles: ['404'],
    component: ()=> import('@/views/404/index.vue')   
  },
  {
    title: '',
    path: '/home',
    roles: ['home'],
    component: ()=> import('@/views/home/index.vue')   
  }
]