vue格式化动态权限菜单

动态权限菜单

• 1. 调用菜单接口获取菜单列表数据
• 2. 使用elementPlus组件库实现左侧菜单栏
• 3. 格式化数据显示到菜单栏
     

1. 调用菜单接口获取菜单列表数据
   
2. 使用elementPlus组件库实现左侧菜单栏
   将菜单定义成一个组件， , 在home.vue 页面使用
   
   

3. 格式化数据显示到菜单栏

菜单接口拿到的数据

将path路径与组件对应起来，映射

• 定义组件
  

格式化动态菜单

• 遍历路由数组；
• 判断有无children，并且是否是数组类型
• 映射component组件
  
  
  
  

角色管理

需求分析：

角色列表

定义一个全局指令，自定义指令，实现资源按钮封装

注意执行顺序：

封装插件—实现按钮权限

插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。可以封装全局指令、全局插件、全局组件

插件使用方式

1、新建文件

const myPlugin = {
  install(app, options) {
    // 配置此应用
  }
}

无感刷新

认识token

token的时效性问题

利用Access/ Refresh Token 来平衡Token安全性和用户体验

以酒店房卡为例：

实现

思路：即短token用于请求，短token失效后，通过长token刷新短token，再次用短token访问

后端设计：

前端设计：
1、定义文件
2、Ligin.vue 中引入 长短token；将长短token保存在localstorong

3、网络错误处理封装在响应拦截器里
打印console.log(response);

优化无感刷新

实现自动刷新，无需点击其他项，在点击当前项，才能出现数据—即无感
短token过期，保存当前请求，刷新token，重新发起请求
需要一个回调函数才能拿到请求config的内容

实现步骤：
1、定义刷新的文件—文件里定义刷新短token

在这里插入代码片

2、