一、背景

要对vue3项目进行升级,主要是添加用户权限,根据不同用户展示不同路由。

二、思路

1.对django后端进行处理,包括添加权限信息列
2.对后端登录接口进行处理,将权限信息通过response返回前端
3.前端将权限信息存入VuexsessionStorage

三、操作

后端

后端的具体表,在models.py中添加auth,包括commonadmin两种代表普通用户和管理员

我们项目中login接口返回的数据

在这里对auth字段进行提取,存入data中,随response发回前端。


前端

首先是对Vuexuser.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.tsindex.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]升级_权限功能+路由设置+动态路由相关推荐

  1. gateway动态路由_无语!SpringCloud Gateway动态路由之Nacos,我已经讲得很清楚了

    前言 当我们的网关Gateway程序开发完成之后,需要部署到生产环境,这个时候你的程序不能是单点运行的,肯定是多节点启动(独立部署或者docker等容器部署),防止单节点故障导致整个服务不能访问,网关 ...

  2. 使用packet Tracer配置静态路由和动态路由

    使用packet Tracer配置静态路由和动态路由(后边附有文件下载链接) 静态路由配置 动态路由配置 学习使用packet Tracer配置静态路由和动态路由.从开始到配置成功历时两天两夜. 由于 ...

  3. IP路由原理、静态路由及动态路由区分

    IP路由原理.静态路由及动态路由区分 1.什么是路由? 2.路由的原理 3.路由来源 3.1.静态路由概述 3.1.1.静态路由配置 3.2.缺省路由/默认路由 3.3.黑洞路由 3.4.动态路由 4 ...

  4. 计算机网络实验(华为eNSP模拟器)——第四章 配置静态路由、动态路由

    目录 前言 一.关闭泛洪信息 二.静态路由 命令 例题 三.动态路由 (一)RIP协议 RIP命令 例题 (二)OSPF协议 OSPF命令 例题(单区域) 例题(多区域) 四.查看全局路由表 结语 前 ...

  5. 7添加静态路由 hat red_不同VPC路由器通过静态路由、动态路由(OSPF)实现网络互通实战...

    作者: 李朗 前言 VPC网络基本上是每个云厂商都具备的功能,不同厂家构建VPC网络的实现方式和操作步骤不尽相同,但是基本目的都是想实现一套虚拟的专有网络.VPC网络是ZStack支持的网络类型之一, ...

  6. IP实验3:静态路由和动态路由配置

    IP实验3:静态路由和动态路由配置 文章目录 IP实验3:静态路由和动态路由配置 静态路由 实验环境 1.按照实验原理图配置好网络拓扑结构. 2.设置PC和路由的IP和接口并设置环回口用于测试. 路由 ...

  7. 直连路由、静态路由、动态路由

    一.路由.路由表: 1.路由:         路由就是不同网段的用户通过路由器进行数据的转发从而跨网段进行通信的一个过程.通俗的说,路由就是一个过程.那么能够通过路由器产生.实现这个过程的方法.方式 ...

  8. 计网-配置静态路由与动态路由

    配置静态路由和动态路由(RIP) 背景 假设校园网分为 2 个区域,每个区域内使用 1 台路由器连接 2 个子网,现要在路由器上做适当配置,实现校园网内各个区域子网之间的相互通信. 理论基础 ①路由器 ...

  9. nodejs之express路由与动态路由

    1.快速创建express项目步骤 /*** 1.cd 到项目里面* 2.npm init --yes 创建package.json文件* 3.安装express* npm install expre ...

最新文章

  1. vue页面绘图_利用vue制作在线涂鸦板
  2. DIV+CSS网页布局常用的一些基础知识
  3. from advanced computing to machine learning
  4. python怎么提交作业_python分析作业提交情况
  5. VS Code 调试 Angular 和 TypeScript 的配置
  6. 10 分钟看懂消息队列 RocketMQ
  7. NXP单片机开发环境搭建,开发包下载
  8. Extended Kalman Filter vs. Error State Kalman Filter for Aircraft Attitude Estimation 翻译
  9. Solr中的日期/时间表示
  10. YUV420P与YUVJ420P
  11. 史上最全无线通信频率分配表
  12. 外媒评出世界十大地质奇迹
  13. Entry name ‘META-INF/xxx‘ collided报错
  14. 片上总线Wishbone 学习(九)总线周期之单次读操作
  15. 强化学习算法:AC系列详解
  16. 努比亚Z11系统服务器选择,努比亚Z11系统升级,赶紧来感受一下脱胎换骨的流畅感...
  17. 标准C++为什么没有垃圾回收(Garbage Collection)
  18. Collections.sort()方法为List集合内对象进行排序
  19. iphone的Safari浏览器中HTML5上传图片方向问题解决方法
  20. 前端资深技术专家苏千的“三迁”故事

热门文章

  1. 网络协议层次(熟读并背诵全文)
  2. Kettle使用教程(一)
  3. 圣诞节高清Mac动态壁纸
  4. 关于byte溢出问题
  5. Python字符串的认知与应用
  6. 学习记录667@项目管理之项目人力资源管理
  7. Python selenium自动化刷问卷+绕过智能验证
  8. 分析帆软填报报表点提交的逻辑
  9. 深度研究微软的资产负债表和财务状况以及未来投资价值
  10. Axmath插入交叉引用的公式编号