這篇文章主要介紹了Vue 簡單實現(xiàn)前端權(quán)限控制的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
簡要說明
最近寫了一下vue控制權(quán)限(菜單、路由)的項目，用了vuex、addRoutes動態(tài)添加路由方法等，總共100多行代碼，跟大家分享一下~
邏輯梳理
除登錄接口、退出接口外，其余接口增加token驗證。
打開頁面時請求獲取菜單接口，請求不成功說明未登錄，給route默認(rèn)添加login頁面以及 * 重定向。
登錄成功后獲取到token，把token存入session以及請求頭。
登錄成功后獲取菜單接口，請求回來的路由和vuex里面全部的路由進(jìn)行匹配，獲取component。
把獲取完component的路由格式化，找自己的parentId，如果找到的話插入到該元素的child里面。
思路大致就是這樣，有聽得模糊的也不要緊，跟隨我的步伐看看代碼是怎樣寫的你就明白了~
實現(xiàn)
1.初始化
route.js
import Vue from 'vue'
import Router from 'vue-router'
import store from '@/store'
Vue.use(Router)
const router = new Router()
// 全局前置守衛(wèi)
router.beforeEach( async (to, from, next) => {
let userRoutes = store.state.global.userRoutes //userRoutes 當(dāng)前用戶擁有的權(quán)限
if (userRoutes.length && !userRoutes.filter(item => item.path == to.path).length) {
next(from.path)
return
}
next()
})
export default router
大家可以看到route.js里沒有路由，因為路由都是動態(tài)添加進(jìn)去的，只有一個全局守衛(wèi)，作用是當(dāng)?shù)顷懗晒?，用戶地址欄手動輸入地址，判斷路由是否正確，如果正確就讓他跳轉(zhuǎn)。
vuex
//state.js
export default {
// 全部路由
allRoutes: [
//登錄頁面
{
path: '/demo',
name: 'demo',
component: () => import('@/views/demo')
},
{
path: '*',
redirect: '/demo'
},
//主頁面
{
path: '/',
component: () => import('@/views'),
},
{
path: '/home',
name: 'home',
component: () => import('@/views/home')
}
],
// 用戶匹配的路由,要用addRoutes添加到route
userRoutes: [],
// 渲染用戶菜單
userMenus: []
}
state中需要定義全部的路由，這個用來跟后臺請求到的權(quán)限進(jìn)行匹配，并且獲取component組件。
actions.js里面是主要的邏輯，其中g(shù)etMenu方法是本文的核心
數(shù)據(jù)返回時格式
menu = [
{id: 1, name: '首頁', path: '/home', parentId: 0},
{id: 2, name: '系統(tǒng)設(shè)置', path: '', parentId: 0},
{id: 3, name: '角色配置', path: '/roles', parentId: 2},
{id: 4, name: '用戶配置', path: '/users', parentId: 2}
]
需要處理成
menu = [
{id: 1, name: '首頁', path: '/home', parentId: 0},
{id: 2, name: '系統(tǒng)設(shè)置', path: '', parentId: 0,
child: [
{id: 3, name: '角色配置', path: '/roles', parentId: 2},
{id: 4, name: '用戶配置', path: '/users', parentId: 2}
]
},
]
所以在下方需要用到遞歸來處理
//actions.js
// 獲取當(dāng)前用戶權(quán)限
getMenu: async ({ state, commit, dispatch }) => {
//請求當(dāng)前用戶所擁有的權(quán)限
let result = await axios('/api/menu/find')
if (result.data.code > 0) {
let userRoutes = result.data.result
userRoutes.forEach(item => {
item.child = []
state.allRoutes.forEach(res => {
if (item.path == res.path) {
item.component = res.component
}
})
})
let oneArr = [], anotherArr = [] //oneArr 一級路由 anotherArr 其他級別路由
oneArr = userRoutes.filter(item => !item.parentId)
anotherArr = userRoutes.filter(item => item.parentId)
anotherArr.forEach(item => {
oneArr.forEach(obj => {
if (item.parentId == obj.id) { //如果匹配 說明找到父級，直接push到父級的child里面
if (!obj.child.filter(k => k.id == item.id).length) {
obj.child.push(item)
}
} else { //如果沒有，說明本級路由沒有找到，去下一級別路由找父級 路由級別：1級路由，2級路由，3級路由......
dispatch('recurrArr', {arr: oneArr, items: item})
}
})
})
commit('setState', {state: 'userRoutes', value: userRoutes})
commit('setState', {state: 'userMenus', value: oneArr})
return {code: 1, data: userRoutes} //處理完成后返回 oneArr是遞歸處理后嵌套的，userRoutes是獲取到component來渲染route的
} else {
return {code: 0}
}
},
// 遞歸找自己的parentId
recurrArr: ({dispatch}, {arr, items}) => {
if (!arr) {
return
}
for(let i = 0; i < arr.length; i ++ ){
let item = arr[i]
if (item.id == items.parentId) {
if (!item.child.filter(k => items.id == k.id).length) {
item.child.push(items)
}
break;
} else {
dispatch('recurrArr', {arr: item.child, items: items})
}
}
}
到現(xiàn)在為止，路由以及菜單的數(shù)據(jù)，就已經(jīng)處理完了，剩下的就是addRoutes添加到route路由里面，這樣頁面就可以跳轉(zhuǎn)了~
我們接著來看登錄：
// 登錄
login: async ({ commit, dispatch}, params) => {
let result = await axios('/api/login', {params})
if(result.data.code > 0) {
// 登錄成功以后 獲取當(dāng)前用戶權(quán)限路由
let userRoutes = await dispatch('getMenu')
if (userRoutes.code > 0) {
// 把請求回來的路由動態(tài)添加到 route 里
router.addRoutes(userRoutes.data)
// 添加完成后，現(xiàn)在可以跳轉(zhuǎn)到首頁了~
router.push('/home')
}
return {code: 1, data: result.data}
} else {
console.log(result.data.msg)
return {code: 0}
}
},
現(xiàn)在就已經(jīng)大功告成了，你的項目可以進(jìn)行正常的登錄、跳轉(zhuǎn)、動態(tài)更新路由等操作了
但是
現(xiàn)在還差最后一步，退出登錄
因為在axios攔截里面，token失效后會調(diào)用退出接口
axios.interceptors.response.use(
response => {
if (response.status === 200) {
// 身份驗證失敗
if(response.data.code === -1) {
// 執(zhí)行退出登錄
store.dispatch('global/loginOut')
} else {
// 如果請求頭里有token
let token = response.headers.token
if(token) {
localStorage.setItem('token', token)
axios.defaults.headers.token = token
}
}
return Promise.resolve(response)
} else {
return Promise.reject(response)
}
}
)
所以才會提到開頭說：剛打開頁面的時候，不管有沒有登錄，都去請求菜單接口。
如果沒有登錄，則會調(diào)用退出登錄接口，給路由設(shè)置默認(rèn)路由。
// 退出登錄
loginOut: async ({ state }) => {
// 退出登錄清空 token 和 headers 里面的 token
localStorage.removeItem('token')
delete axios.defaults.headers.token
// 退出登錄要動態(tài)添加 登錄頁面 和 * 重定向頁面
let errRoutes = state.allRoutes.filter(item => item.path == '*')
errRoutes.push(state.allRoutes.filter(res => errRoutes[0].redirect == res.path)[0])
router.addRoutes(errRoutes);
router.currentRoute.path !== '/demo' ? router.push("/demo") : null
let result = await axios('/api/loginOut', {params: {userId: state.userId}})
if(result.data.code !== 1) {
console.log('退出登錄接口異常')
}
},
到現(xiàn)在為止，有項目就算大功告成了
到此這篇關(guān)于Vue 簡單實現(xiàn)前端權(quán)限控制的示例的文章就介紹到這了,更多相關(guān)Vue 前端權(quán)限控制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
來源：腳本之家
鏈接：https://www.jb51.net/article/202890.htm
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
