Vue路由許可權

在做後台管理系統的時候，一般都會遇見路由許可權的問題。

大家可以先體驗一下最終的例子 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`)
}}})

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()
}}

/**

* 該元件集合會配合後台返回的動態路由表，匹配有角色許可權的 component
*/export
default

import asyncroutesmap from

'./asyncroutesmap'
const
page404=(
)=>
import
('@/views/page404.vue'
)// 基礎的動態路由，帶有萬用字元 * 的路由應該始終放置在路由表的最後面，會拼接到驗權生成的動態路由後面
const asyncroutesbase =[}
,}]// 對後台返回的動態路由 component 屬性實體化工具函式
const
formatasyncroute
=(asyncroutes)
=>
else}if
(asyncroute.children)})
}export

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這個明星專案，並在此基礎上基於業務進行了整合，接下來我會以這個專案為例，仔細地剖析整個路由和許可權校驗的過程，也算是對這個知識點的一...