Vue路由許可權控制分析

本人在公司主要負責中後台系統的開發，其中路由和許可權校驗算是非常重要且最為基本的一環。實際開發專案中，關於登入和路由許可權的控制參照了vue-element-admin這個明星專案，並在此基礎上基於業務進行了整合，接下來我會以這個專案為例，仔細地剖析整個路由和許可權校驗的過程，也算是對這個知識點的一些總結。

進入今天主題之前，我們先來梳理下整個專案,src 目錄下的。

對這專案感興趣的同學可以自行，有針對性地學習，除了路由許可權校驗的功能以外，也包含了很多有意思的功能，相信能夠學到不少東西。

路由2.png

import router from './router'
import store from './store'
import  from 'element-ui'
import nprogress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import  from '@/utils/auth' // get token from cookie
nprogress.configure() // nprogress configuration
const whitelist = ['/login', '/auth-redirect'] // 白名單配置
router.beforeeach(async(to, from, next) => )
nprogress.done() // hack: 
} else  else  = await store.dispatch('user/getinfo')
// 根據使用者的角色，動態生成路由
const accessroutes = await store.dispatch('permission/generateroutes', roles)
// 動態新增路由 (將基本的路由資訊跟動態路由進行合併)
router.addroutes(accessroutes)
// 繼續訪問
next()
} catch (error) `)
nprogress.done()
} }} } else  else `)
nprogress.done()
} }}) router.aftereach(() => )

注意到，**中的/login?redirect=$, 這裡的 redirect 引數主要是用於，在使用者登入成功後進行跳轉的頁面路徑。具體功能在/views/login/index.vue 檔案下

watch: 
}, immediate: true
}},// methods下的：
handlelogin() )
this.loading = false
}) } else 
})},

我們先來看看路由的定義，在/src/router/index.js 檔案下

export const constantroutes = [ // 用來定義普通的路由配置，不需要訪問許可權的
// 路由配置物件
]export const asyncroutes = [ // 通過路由元資訊meta.roles來設定訪問許可權，一般來說是個陣列
, // ...
}]

動態新增路由時，本質上就是根據使用者的角色資訊在 asyncroutes 路由配置陣列中進行路由篩選，找到相對應的路由，與 constantroutes 合併生成最新的路由。

動態路由生成.png

**入口: permission.js

const accessroutes = await store.dispatch('permission/generateroutes', roles)

permission/generateroutes 方法入口檔案:/strore/modules/permissions.js

import  from '@/router'
const state = 
const mutations = 
} const actions = , roles)  else 
// 將最終的結果存放到vuex中
commit('set_routes', accessedroutes)
// resolve出去
resolve(accessedroutes)
}) }
}

對非同步路由進行篩選，並將最終的結果存放到 vuex 中，並將結果 resolve 出去

export function haspermission(roles, route)  else 
} export function filterasyncroutes(routes, roles) 
if (haspermission(roles, tmp)) 
// 將處理好的路由配置放入到res中
res.push(tmp)
} })
return res
}

最後回到/permission.js 檔案中

const accessroutes = await store.dispatch('permission/generateroutes', roles) // 這裡的accessroutes就是篩選之後的路由， // 最後通過route.addroutes將constroutes和accessroutes進行合併，生成最終的訪問路由 router.addroutes(accessroutes)

路由許可權控制基本流程已經分析完，接下來我們也來看看專案裡的按鈕許可權控制的實現,實現也比較簡單。

基本用法
import store from '@/store'
function checkpermission(el, binding)  = binding
// 從store中拿到我們訪問介面後，取到使用者角色資訊
const roles = store.getters && store.getters.roles
if (value && value instanceof array) )
// 沒有許可權則進行刪除，不展示。
// v-permission具體實現可以根據業務場景進行修改
if (!haspermission) 
} } else 
} export default ,
update(el, binding) 
}

呼叫獲取使用者資訊介面，獲取到使用者資訊, 將使用者資訊存放到 vuex 中

判斷使用者角色

將最終的可訪問路由存放到 vuex 中，最後通過 router.addroutes，整合最後的路由配置列表

不存在 token

Vue路由許可權控制分析

Vue 路由角色的許可權控制

Vue 許可權控制的方法路由驗證

Vue路由許可權

Vue路由許可權控制分析

Vue 路由 角色的許可權控制

Vue 許可權控制的方法 路由驗證

Vue路由許可權

相關推薦

Vue 路由角色的許可權控制

Vue 許可權控制的方法路由驗證