前情提要
作為項(xiàng)目經(jīng)驗(yàn)稀少的vue開發(fā)者來說，在關(guān)鍵技術(shù)點(diǎn)上的經(jīng)驗(yàn)不多，我希望通過我的思想和實(shí)踐，把好的東西分享在這里，目的是進(jìn)一步促進(jìn)技術(shù)交流。項(xiàng)目即將完成，權(quán)限是最后的收尾工作，好的權(quán)限實(shí)現(xiàn)方案，可以讓我們沒有后顧之憂，也可以提升項(xiàng)目的運(yùn)行速度。
應(yīng)用場(chǎng)景
在開發(fā)之前，我粗略的瀏覽了一些權(quán)限實(shí)現(xiàn)方法，可以說智者見智吧，例如一種實(shí)現(xiàn)方案是在router的守衛(wèi)里判斷，我認(rèn)為雖然實(shí)現(xiàn)了功能，但是增加了路由的功能壓力。我們的需求是登錄后即獲知權(quán)限，根據(jù)權(quán)限提供功能；根據(jù)以上倆點(diǎn)需求我做出了如下計(jì)劃：
- 找一個(gè)合適的入口，判斷要提供的菜單以及用戶擁有什么權(quán)限，不能影響頁面加載
- 在對(duì)應(yīng)的頁面中拿到權(quán)限，提供需要的功能
- 必須整個(gè)系統(tǒng)都可以輕易拿到，且要避免安全問題
實(shí)戰(zhàn)解析
大多的實(shí)現(xiàn)方案是添加路由，我也實(shí)踐了一次，發(fā)現(xiàn)存在路由重定向問題，于是我準(zhǔn)備反其道而行，初始提供所有路由，根據(jù)權(quán)限移除不需要的路由，上面我分析到，我不想給導(dǎo)航守衛(wèi)添加過多的壓力，避免影響頁面渲染，所以我利用了pinia狀態(tài)庫+router.removeRoute來實(shí)現(xiàn)路由的控制;
1、控制添加路由
首先我們應(yīng)該準(zhǔn)備基礎(chǔ)的router配置，包括公共頁面，異常頁面等：
//router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { useUsersStore } from "@/store/user";
import Cookies from "js-cookie";
import { isUserTime } from "@/tool/unitl.js"
const routes = [
{
path: '/',
name: 'Index',
component: () => import('@/view/Index.vue'),
},
{
path: '/login',
name: 'Login',
component: () => import('@/view/Login.vue')
},
{
path: '/business',
name: 'Business',
component: () => import('@/view/business/Index.vue')
},
{
path: '/business/project',
name: 'BusinessProject',
component: () => import('@/view/business/Project.vue')
},
{
path: '/commerce',
name: 'Commerce',
component: () => import('@/view/commerce/Index.vue')
},
{
path: '/commerce/project',
name: 'CommerceProject',
component: () => import('@/view/commerce/Project.vue')
},
{
path: '/consult',
name: 'Consult',
component: () => import('@/view/consult/Index.vue')
},
{
path: '/consult/project',
name: 'ConsultProject',
component: () => import('@/view/consult/Project.vue')
},
{
path: '/finance',
name: 'Finance',
component: () => import('@/view/finance/Index.vue'),
children: [
{
path: 'projects/project',
name: 'FinanceProjectsProject',
component: () => import('@/view/finance/projects/Project.vue')
},
{
path: 'employee/project',
name: 'FinanceEmployeeProject',
component: () => import('@/view/finance/employee/Project.vue')
},
{
path: 'account',
name: 'FinanceAccount',
component: () => import('@/view/finance/account/Index.vue')
},
{
path: 'authority/project',
name: 'FinanceAuthority',
component: () => import('@/view/finance/authority/Project.vue')
}
]
},
{
path: '/chief',
name: 'Chief',
component: () => import('@/view/chief/Index.vue'),
children: [
{
path: 'first_examine/project',
name: 'firstExamineProject',
component: () => import('@/view/chief/first_examine/Project.vue')
},
{
path: 'second_examine/project',
name: 'secondExamineProject',
component: () => import('@/view/chief/second_examine/Project.vue')
}
]
},
{
path: '/email',
name: 'Email',
component: () => import('@/view/email/Index.vue')
},
{
path: '/person',
name: 'Person',
component: () => import('@/view/person/Detail.vue')
},
{
path: '/:pathMatch(.*)*',
name: '404',
component: () => import('@C/tool/Page404.vue')
}
]
const router = createRouter({
history: createWebHistory(), //history
routes
})
router.beforeEach(async (to, from) => {
//pinia倉庫可以最早出現(xiàn)的地方，路由初始化完畢
const store = useUsersStore();
if (to.name == '404' && from.name == 'Login') {
//處理404問題，并且從login跳轉(zhuǎn)任何404頁面重置為L(zhǎng)ogin頁面
return { name: 'Login' };
} else if (store.isLogin) {
//不是404，登錄狀態(tài)在，正常跳轉(zhuǎn)
return true;
} else if (isUserTime() && Cookies.get("loginPwd")) {
//刷新進(jìn)入，判斷是否過期了登錄時(shí)間，Cookie中是否存在密碼
//如果存在免登錄，如果登錄過程存在路由不存在的問題則404，否則正常跳轉(zhuǎn)
let exist = await store.Login(to);
if (!exist) return { name: '404' };
}
else return { name: "Login" };
});
export default router
以上代碼為router所有前期需要準(zhǔn)備的代碼，已經(jīng)我處理路由異常情況的實(shí)現(xiàn)方案，核心是利用：async await 倆個(gè)關(guān)鍵字實(shí)現(xiàn)，因?yàn)樵诘卿浐螅覀兣渲靡瞥藛魏蜋?quán)限是需要時(shí)間的，必須要嚴(yán)格控制異步，這里也順便處理了路由輸入回車跳轉(zhuǎn)情況， 通過await store.Login(to);傳入了to的參數(shù)來判斷如何跳轉(zhuǎn)，接下來參考下我的pinia倉庫實(shí)現(xiàn)過程；
//src/store/user.ts
import { defineStore } from 'pinia'
import { apiGetUser } from '@/axios/user.js'
import CryptoJS from 'crypto-js'
import router from '@/router/index.js'
// 第一個(gè)參數(shù)是應(yīng)用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
state: () => {
return {
isLogin: false,
phone: sessionStorage.UserN ? CryptoJS.AES.decrypt(
sessionStorage.getItem('UserN'),
"abc!"
).toString(CryptoJS.enc.Utf8) : '',
pwd: "",
deptno: "",
idCard: "",
lockState: "",
birthday: "",
name: "",
sex: "男",
power: '',//權(quán)限：0-admin,1-部門總負(fù)責(zé)人,2-部門項(xiàng)目負(fù)責(zé)人,3-部門成員
showMenu: '',
}
},
actions: {
Login(to) {
let _that = this;
let MenuArray = ['Business', 'BusinessProject', 'Commerce', 'CommerceProject', 'Consult', 'ConsultProject', 'Finance', 'Chief'];
return new Promise((t, f) => {
_that.isLogin = true;
let data = new FormData();
data.append('loginAct', _that.phone)
apiGetUser(data).then(res => {
let { deptno, idCard, lockState, name, sex, birthday } = res, showMenu = deptno.charAt(0);
console.log(res);
_that.$patch({
deptno,
idCard,
lockState,
name,
sex,
birthday,
showMenu
})
if (showMenu == 'R') {
t(true)
} else {
//過濾菜單項(xiàng)
switch (showMenu) {
case 'A': MenuArray = MenuArray.filter(item => {
return item.indexOf('B') == -1
}); break;
case 'B': MenuArray = MenuArray.filter(item => {
return item.indexOf('Com') == -1
}); break;
case 'C': MenuArray = MenuArray.filter(item => {
return item.indexOf('Con') == -1
}); break;
case 'D': MenuArray = MenuArray.filter(item => {
return item.indexOf('F') == -1
}); break;
case 'E': MenuArray = MenuArray.filter(item => {
return item.indexOf('Ch') == -1
}); break;
}
//循環(huán)移除
let Length = MenuArray.length;
MenuArray.forEach((item, index) => {
if (index == Length - 1) {
router.removeRoute(item);
if(to.name && router.hasRoute(to.name)){
t(true)
}else{
t(false)
}
} else {
router.removeRoute(item)
}
})
}
})
})
},
},
})
這里我直接展示了我的代碼，如果你不熟悉pinia,要抓緊補(bǔ)了，在用戶登錄驗(yàn)證成功后，這里會(huì)調(diào)用user庫的login函數(shù)，也會(huì)攜帶路由要to的參數(shù)，這里只需要明確幾個(gè)點(diǎn)即可：
- MenuArray，將來用來循環(huán)removeRoute使用的數(shù)組，映射路由name
- 根據(jù)自己的配置規(guī)則，篩選 MenuArray
- 通過
index == Length - 1嚴(yán)格控制最后一次移除，并且判斷to.name是否合法 - 理解await原理，await必須出現(xiàn)在async函數(shù)中，且 返回函數(shù)如果是Promise，則只接受resolved中的值；
- router, 熟悉vue3的同志知道 有一個(gè)useRouter 驅(qū)動(dòng)函數(shù)，在我們的方案里不能那樣使用，因?yàn)閡seRouter必須在setup函數(shù)中使用；
2、實(shí)踐觀察
我們的需求完美實(shí)現(xiàn)，接下來就是把不需要的菜單隱藏掉
3、控制功能
路由我們已經(jīng)控制住了，隱藏菜單就很容易了，加載userStore 獲取條件v-if即可，例如在header組件中：
//header.vue
import { useUsersStore } from "@/store/user.js"
const user = useUsersStore();
//html
<el-menu-item index="/">首頁</el-menu-item>
<el-menu-item v-if="'AR'.indexOf(user.showMenu) != -1" index="/business">業(yè)務(wù)部</el-menu-item>
<el-menu-item v-if="'BR'.indexOf(user.showMenu) != -1" index="/commerce">商務(wù)部</el-menu-item>
<el-menu-item v-if="'CR'.indexOf(user.showMenu) != -1" index="/consult">咨詢部</el-menu-item>
<el-menu-item v-if="'DR'.indexOf(user.showMenu) != -1" index="/finance">財(cái)務(wù)部</el-menu-item>
<el-menu-item v-if="'ER'.indexOf(user.showMenu) != -1" index="/chief">總工辦</el-menu-item>
這邊根據(jù)自己團(tuán)隊(duì)的權(quán)限規(guī)范條件處理即可，其他的控制舉一反三
4、解決異步路由問題
router.beforeEach(async (to, from) => {
//pinia倉庫可以最早出現(xiàn)的地方，路由初始化完畢
const store = useUsersStore();
if (to.name == '404' && from.name == 'Login') {
//處理404問題，并且從login跳轉(zhuǎn)任何404頁面重置為L(zhǎng)ogin頁面
return { name: 'Login' };
} else if (store.isLogin) {
//不是404，登錄狀態(tài)在，正常跳轉(zhuǎn)
return true;
} else if (isUserTime() && Cookies.get("loginPwd")) {
//刷新進(jìn)入，判斷是否過期了登錄時(shí)間，Cookie中是否存在密碼
//如果存在免登錄，登錄過程存在路由不存在問題則404，否則正常跳轉(zhuǎn)
let exist = await store.Login(to);
if (!exist) return { name: '404' };
}
else return { name: "Login" };
});
這里是我項(xiàng)目的路由守衛(wèi)，它已經(jīng)完成絕大部分功能，登錄權(quán)限判斷，404處理，刷新進(jìn)入，狀態(tài)持久化，異步操作在網(wǎng)絡(luò)環(huán)境中是無法避免的，router官方示例也明確提醒了我們?nèi)绾问褂?，這里我們是利用服務(wù)器數(shù)據(jù)判斷要移除的菜單，且不說http響應(yīng)異步，router.removeRoute()也只能是一次刪除一個(gè)，所以在store.Login(to)我嚴(yán)格控制了邏輯，并且也解決了上述問題,使用我這樣的全局守衛(wèi)來配置必須要理清楚邏輯：依靠 async及await來實(shí)現(xiàn)，缺點(diǎn)是會(huì)有短暫的延遲，還不夠流暢，但是筆者由于時(shí)間問題，不能再優(yōu)化下去，希望大家吸取精華去掉糟粕。
至此我的分享結(jié)束，如果大家有更好的解決方案，希望可以進(jìn)一步交流。文章來源：http://www.zghlxwxcb.cn/news/detail-402517.html
最后
?? vue專欄
?? 個(gè)人簡(jiǎn)介：一個(gè)喜愛技術(shù)的人。
?? 勵(lì)志格言: 腳踏實(shí)地，虛心學(xué)習(xí)。
?如果文章還可以，記得用你可愛的小手點(diǎn)贊??關(guān)注?，我會(huì)在第一時(shí)間回、回訪，歡迎進(jìn)一步交流。文章來源地址http://www.zghlxwxcb.cn/news/detail-402517.html
到了這里，關(guān)于vue3 一個(gè)基于pinia簡(jiǎn)單易懂的系統(tǒng)權(quán)限管理實(shí)現(xiàn)方案，vue-router動(dòng)態(tài)路由異步問題解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
