# 權限驗證
在[手摸手，帶你用 vue 擼后臺 系列二(登錄權限篇)](https://juejin.im/post/591aa14f570c35006961acac)這篇文章中其實已經詳細介紹過了。
該項目中權限的實現方式是：通過獲取當前用戶的權限去比對路由表，生成當前用戶具的權限可訪問的路由表，通過`router.addRoutes`動態掛載到`router`上。
但其實很多公司的業務邏輯可能不是這樣的，舉一個例子來說，很多公司的需求是每個頁面的權限是動態配置的，不像本項目中是寫死預設的。但其實原理是相同的。如：你可以在后臺通過一個 tree 控件或者其它展現形式給每一個頁面動態配置權限，之后將這份路由表存儲到后端。當用戶登錄后得到`roles`，前端根據`roles`去向后端請求可訪問的路由表，從而動態生成可訪問頁面，之后就是 router.addRoutes 動態掛載到 router 上，你會發現原來是相同的，萬變不離其宗。
只是多了一步將后端返回路由表和本地的組件映射到一起。相關[issue](https://github.com/PanJiaChen/vue-element-admin/issues/293)
~~~
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]
~~~
Ps:不排除之后本項目會增加權限控制面板支持真正的動態配置權限。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/permission.html#%E9%80%BB%E8%BE%91%E4%BF%AE%E6%94%B9)邏輯修改
現在路由層面權限的控制代碼都在`@/permission.js`中，如果想修改邏輯，直接在適當的判斷邏輯中`next()`釋放鉤子即可。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/permission.html#%E6%8C%87%E4%BB%A4%E6%9D%83%E9%99%90)指令權限
封裝了一個指令權限，能簡單快速的實現按鈕級別的權限判斷。[v-permission](https://github.com/PanJiaChen/vue-element-admin/tree/master/src/directive/permission)
**使用**
~~~
<template>
<!-- Admin can see this -->
<el-tag v-permission="['admin']">admin</el-tag>
<!-- Editor can see this -->
<el-tag v-permission="['editor']">editor</el-tag>
<!-- Editor can see this -->
<el-tag v-permission="['admin','editor']">Both admin or editor can see this</el-tag>
</template>
<script>
// 當然你也可以為了方便使用，將它注冊到全局
import permission from '@/directive/permission/index.js' // 權限判斷指令
export default{
directives: { permission }
}
</script>
~~~
**局限**
In some cases it is not suitable to use v-permission, such as element Tab component which can only be achieved by manually setting the v-if.
可以使用全局權限判斷函數，用法和指令`v-permission`類似。
~~~
<template>
<el-tab-pane v-if="checkPermission(['admin'])" label="Admin">Admin can see this</el-tab-pane>
<el-tab-pane v-if="checkPermission(['editor'])" label="Editor">Editor can see this</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin','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>
~~~
