在做後台管理系統的時候,一般都會遇見路由許可權的問題。
大家可以先體驗一下最終的例子 authority vue router ,例子專案位址 authorityrouter。在例子的登入頁面中,通過選擇不同的使用者型別來模擬不同的使用者賬號登入的情況,通過不同的使用者型別登入後台的時候,可以看到左側的 menu 選單是不同的,只有當有許可權的時候才可以進行檢視,並且當手動輸入的時候都會直接到404頁面。
下面我就圍繞這個例子說一下實現原理:
src/permission.js
此檔案會被引入import vue from
'vue'
import router from
'./router'
import store from
'./store'
// 路由白名單,允許未登入的時候可以檢視的路由
const whitelist =
['/login'
]router.
beforeeach
(async
(to,
from
, next)
=>
// 獲取cookies
// 有cookies的時候就預設登入
let authorityroutertype = vue.$cookies.
get(
'authorityroutertype')if
(authorityroutertype && authorityroutertype *
1>=0)
else)}
catch
(error)`
)}}}
}else
else`)
}}})
main.js
進行執行。
src/store/module/permission.js
import vue from
'vue'
import
from
'@/router/index'
import
from
'@/router/dynamicroutes/index'
/** * use meta.role to determine if the current user has permission
*/function
haspermission
(role, route)
}/**
* 對路由進行篩選
*/export
function
filterasyncroutes
(routes, role)if(
haspermission
(role, tmp)
)else
res.
push
(tmp)
}else
if(tmp.meta && route.meta.base)})
return res
}export
default
, mutations:
,setaccessedroutes
(state, accessedroutes)
,resetasyncroutes
(state)},
actions:
, type))if
(res.status && res.status ===
200)
}else
commit
('setaccessedroutes'
, accessedroutes)
resolve
(accessedroutes)})
}else
}else},
logout()
}}
src/router/dynamicroutes/asyncroutesmap.js
將所有路由 import 待用
/**
* 該元件集合會配合後台返回的動態路由表,匹配有角色許可權的 component
*/export
default
src/router/dynamicroutes/index.js
import asyncroutesmap from
'./asyncroutesmap'
const
page404=(
)=>
import
('@/views/page404.vue'
)// 基礎的動態路由,帶有萬用字元 * 的路由應該始終放置在路由表的最後面,會拼接到驗權生成的動態路由後面
const asyncroutesbase =[}
,}]// 對後台返回的動態路由 component 屬性實體化工具函式
const
formatasyncroute
=(asyncroutes)
=>
else}if
(asyncroute.children)})
}export
src/router/index.js
實際上路由許可權也是將所有頁面元件都匯入了,只是 router 路由中是否新增對應的路由資訊罷了。import vue from
'vue'
import vuerouter from
'vue-router'
const
login=(
)=>
import
('../views/login.vue'
)vue.
use(vuerouter)
// 公共路由,和路由白名單裡的路由資訊一致
const publicroutes =[}
]// 生成資訊的公共路由
)// 重置router
resetrouter()
// 根據許可權得到可用的路由資訊
}
vue 判斷許可權過期 vue 路由許可權
我把router.js分成router.js和routes.js兩個檔案 routes.js頁面存放 公共路由 角色路由 設定使用者角色路由許可權 router.js頁面 正常的新增路由 新增beforeach路由導航 判斷角色 根據角色 渲染不用頁面的路由選單 router.beforeeach ...
vue後台登入 許可權路由
技術棧 wepack 打包神器 vue js框架 vuex 實現不同元件間的狀態共享 注 簡述vuex和localstorage,全域性變數的區別 為了解決跨元件之間的資料共享問題,乙個元件的資料變化對映到使用這個資料的其他元件中,重新整理頁面之前儲存的vuex資料會被初始化掉.localstora...
Vue路由許可權控制分析
本人在公司主要負責中後台系統的開發,其中路由和許可權校驗算是非常重要且最為基本的一環。實際開發專案中,關於登入和路由許可權的控制參照了vue element admin這個明星專案,並在此基礎上基於業務進行了整合,接下來我會以這個專案為例,仔細地剖析整個路由和許可權校驗的過程,也算是對這個知識點的一...