角色权限控制合集

后端返回角色标识

前提条件

• 已知固定两种角色
• 已知每种角色需要展示的菜单

思路步骤

• 登录获取角色标识
• 根据角色在vuex中存储该权限拥有的权限数组

[{  path: '/foo',
	name:'foo', 
	redirect:'',
	meta: {
      icon: "weibo",
      title: "首页",
    }, 
    children: [],
    component: Foo }]

• 根据路由数组生成路由文件和菜单数组

// 路由文件引入所有文件
const Foo = () => import('./Foo.vue')

注意

• vuex中新设置的值，当网页刷新时会丢失，恢复初始值
• 所以采用存在本地的方式

后台根据不同的角色返回路由

• 当页面刷新或者第一次进来非登录页（页面刷新store中的数据会回复初始值）
• 调取接口获取路由数据，并存储在vuex中
• 使用router.addRoutes() 添加动态路由
• 最后next({ … to }) 继续跳转页面
  
• 从vuex中获取数据，生成菜单