权限验证

Vue 前端项目的权限验证

Vue 前端项目权限的实现方式是：通过获取当前用户的权限去比对路由表，生成当前用户具有权限的可访问路由表，通过 router.addRoutes 动态挂载到 router 上。

const map= {
 login: require('login/index').default // 同步的方式
 login: ()=>import('login/index')      // 异步的方式
}
// 存在服务端的 map 类似于
const serviceMap = [
 { path: '/login', component: 'login', hidden: true }
]
//遍历这个 map，动态生成 asyncRoutes。将 component 替换为 map[component]

逻辑修改

路由层面权限的控制代码都在 src/permission.js 中，如果想修改逻辑，直接在适当的判断逻辑中 next() 释放钩子即可。

指令权限

封装了一个指令权限，能简单快速地实现按钮级别的权限判断，代码在 src/directive/permission。

使用

<template>
  <!-- Admin can see this -->
  <el-tag v-permission="['ROLE_ADMIN']">admin</el-tag>
  <!-- Editor can see this -->
  <el-tag v-permission="['ROLE_EDITOR']">editor</el-tag>
  <!-- Editor can see this -->
  <el-tag v-permission="['ROLE_ADMIN','ROLE_EDITOR']">Both admin or editor can see this</el-tag>
</template>

<script>
// 也可以为了方便使用，将它注册到全局
import permission from '@/directive/permission/index.js' // 权限判断指令
export default {
  directives: { permission }
}
</script>

可以使用全局权限判断函数，用法和指令跟 v-permission 类似。

<template>
  <el-tab-pane v-if="checkPermission(['ROLE_ADMIN'])" label="Admin">Admin can see this</el-tab-pane>
  <el-tab-pane v-if="checkPermission(['ROLE_EDITOR'])" label="Editor">Editor can see this</el-tab-pane>
  <el-tab-pane v-if="checkPermission(['ROLE_ADMIN','ROLE_EDITOR'])" label="Admin-OR-Editor">Both admin or editor can see this</el-tab-pane>
</template>
<script>
import checkPermission from '@/utils/permission' // 权限判断函数
export default {
   methods: {
    checkPermission
   }
}
</script>