一、背景

要對vue3項目進行升級，主要是添加用戶權限，根據不同用戶展示不同路由。

二、思路

1.對django后端進行處理，包括添加權限信息列
2.對后端登錄接口進行處理，將權限信息通過response返回前端
3.前端將權限信息存入Vuex和sessionStorage中

三、操作

后端

后端的具體表，在models.py中添加auth，包括common和admin兩種代表普通用戶和管理員

我們項目中login接口返回的數據

在這里對auth字段進行提取，存入data中，隨response發回前端。

---

前端

首先是對Vuex中user.ts添加auth狀態、方法
在login接口接收到res時，

commit('setUserAuth', res.data.auth);

寫入session

export const setAuth = (auth: string) => {sessionStorage.setItem(Keys.Auth, JSON.stringify(auth)); }

對路由白名單進行處理，設置adminRouterList[] 和 commonRouterList[]兩種路由路徑
根據用戶身份進行不同名單跳轉

const Roles = store.state.user.authif(Roles && Roles > 0){//普通用戶if(Roles == common){//我要跳轉的路徑在用戶路由名單里 if(userRouterList.indexOf(to.path) !== -1){next();} else {next({path:'/login'});} } else {//我要跳轉的路徑在管理員名單里if(adminRouterList.indexOf(to.path) !== -1){next();} else {next({path:'/login'});}}}

重新構建路由
拆分成route.ts與index.ts
其中route.ts定義靜態路由和動態路由，主要是在meta屬性中添加roles代碼省略。。。
index.ts中，需要將符合權限的路由寫入Vuex
主要代碼如下：

//2.判斷路由的用戶權限, 傳入roles權限和route路由 export function hasRoles(roles: any, route: any){if(route.meta && route.meta.roles){//如果路由有meta對象和meta.roles，并且其中包含要判斷的rolereturn roles.some((role: any) => route.meta.roles.includes(role));} else return true; }; //3.設置過濾權限的路由，傳入roles權限和route路由 export function setFilterHasRolesMenu(routes: any, roles: any){//聲明一個過濾完的menu存儲菜單const menu: any = [];//對每一個路由遍歷執行routes.foreach((route: any) => {//擴展運算符處理成對象const item = {...route};//判斷有沒有權限if(hasRoles(roles, item)){//如果有子路由，遞歸子路由if(item.children){item.children = setFilterHasRolesMenu(item.children, roles);}//權限符合，插入menu存儲菜單數組menu.push(item);}});return menu; }//4. 將處理后的一維數組菜單存入vuex routesList中, export function setFilterMenu(){//將動態路由和用戶的權限身份進行過濾路由操作store.dispatch('routesList/setRoutesList', setFilterHasRolesMenu(dynamicRoutes[0].children, store.state.user.auth)); };

新建store/modules/routeList.ts，用來存儲對應的路由列表

//4的方法會將routeList存入vuex... //定義state接口類型 export type RouteState = {routesList: string[], } //定義state export const state: RouteState = {// 展示路由routesList: [], }; //定義mutations export const mutations = {getRoutesList(state: any, data: Array<object>) {state.routesList = data;}, } //定義actions export const actions = {async setRoutesList({ commit }, data: any) {commit('getRoutesList', data);}, } export default {namespaced: true,state,mutations,actions,getters }

在側邊欄menuBar.vue中，onMounted階段進行權限確認和路由菜單獲取

onMounted(() => {setFilterMenu();() => {//獲取對應的動態路由數組menuList = store.state.routesList.routesList;}} )

總結

以上是生活随笔為你收集整理的[vue3+django]升级_权限功能+路由设置+动态路由的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。