[vue3+django]升级_权限功能+路由设置+动态路由

一、背景

要对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.auth
 if(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，并且其中包含要判断的role
        return 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