后台系统的权限控制与管理

Posted 2021-08-08 饮尽杯中月

菜单的控制

1. 在login.vue中获取数据，在Home.vue中进行使用，所以使用vuex

2. 在vuex中加入rigthList数据和设置rigthList的方法，然后在login.vue中使用这个设置rigthList的方法，将权限数据传入vuex
   

3. 然后Home.vue要使用这个数据，将vuex中的rigthList映射成计算属性，然后可以像使用普通数据一样使用

4. bug:刷新界面菜单栏消失

• seesionStorage应该是存入字符串，而data是数组，所以进行转换
• 当刷新界面的时候，vuex重新加载，将rightsList不应该写成一个空的数组，而是从seesionStorage中获取，此时将字符串转为一个数组，且给一个初始值[]

5. 标明用户名，方便查看当前用户

• 和侧边栏显示步骤类似
  
  
  6.完善退出功能
  

界面的控制

1. 将token存在sessionStorage之中，当访问某个界面的时候（当路由信息发生变化时），判断token是否存在，如果不存在跳转登录界面
   
   

• 应该在登陆成功之后，根据用户的权限，动态添加这些路由
• 可以将动态添加的代码，写在router.js中，然后导出
  
  
  • 遍历二级权限进行添加，而二级权限在rightList里面，所以通过vuex拿到rightList
  • 路由规则和字符串uesr,role,goods等的映射关系
• 在Login.vue导入该方法，并使用
• 存在bug:刷新页面，进入404，原因：刷新页面，router.js刷新，此时只有原来的路由，没有了动态路由，而动态路由是在登录时候添加的
  

按钮的控制

1. 自定义组件的注册

   • inserted在组件被插入DOM中时候被调用，el:当前使用指令的元素，bing:指令后面绑定的数据
     
     

   • 一定要在main.js中import permission.js

   • 在动态路由添加的过程中，将rigthList二级权限的rights赋值给元数据meta

   • 丰富自定义组件的权限选项：禁用
     
     

• 将自定义组件使用在其他的按钮中
  

请求和响应

请求控制

1.

2.

创建请求方式和操作权限的映射关系

响应控制

比如登录后在管理界面长时间停留，token超时了

小结