vue-admin 前端路由权限控制

[ahKevinXy]

https://juejin.im/post/591aa14f570c35006961acac

• 能不能提供一个实例
• 后台那边怎么反馈数据什么 的

[diveDylan]

方案A 前端根据token等标识请求用户角色，后台返回角色名字admin, saler, user, 前端在路由中配置权限，遍历递归路由表实现权限过滤 前端路由配置代码示例

//动态需要根据权限加载的路由表 
export const asyncRouterMap = [
  {
    path: '/permission',
    component: Layout,
    name: '权限测试',
    meta: { role: ['admin','super_editor'] }, //页面需要的权限
    children: [
    { 
      path: 'index',
      component: Permission,
      name: '权限测试页',
      meta: { role: ['admin','super_editor'] }  //页面需要的权限
    }]
  },
  { path: '*', redirect: '/404', hidden: true }
];

权限递归过滤函数---手摸手，带你用vue撸后台 系列二(登录权限篇)

[diveDylan]

https://juejin.im/post/591aa14f570c35006961acac

• 能不能提供一个实例
• 后台那边怎么反馈数据什么 的

方案B 前端根据token等标识请求用户角色，后台返回用户页面权限树路由码表[A,B,C,D]，前后端共同维护一份路由码表 前端路由配置

export const asyncRouterMap = [
  {
    path: '/permission',
    component: Layout,
    name: '权限测试',
    meta: { role: ['admin','super_editor'] }, //页面需要的权限
    children: [
    { 
      path: 'index',
      component: Permission,
      name: '权限测试页',
      auth: 'A' //页面需要的权限码
    }]
  },
  { path: '*', redirect: '/404', hidden: true }
];

路由递归过滤得到新的路由表注册即可，递归函数请手写

[ahKevinXy]

方案A 前端根据token等标识请求用户角色，后台返回角色名字admin, saler, user, 前端在路由中配置权限，遍历递归路由表实现权限过滤 前端路由配置代码示例

//动态需要根据权限加载的路由表 
export const asyncRouterMap = [
  {
    path: '/permission',
    component: Layout,
    name: '权限测试',
    meta: { role: ['admin','super_editor'] }, //页面需要的权限
    children: [
    { 
      path: 'index',
      component: Permission,
      name: '权限测试页',
      meta: { role: ['admin','super_editor'] }  //页面需要的权限
    }]
  },
  { path: '*', redirect: '/404', hidden: true }
];

权限递归过滤函数---手摸手，带你用vue撸后台 系列二(登录权限篇)

https://juejin.im/post/591aa14f570c35006961acac

• 能不能提供一个实例
• 后台那边怎么反馈数据什么的

方案B 前端根据令牌等标识请求用户角色，后台返回用户页面权限树路由码表[A，B，C，D]，前合并共同维护一份路由码表 前端路由配置

export  const  asyncRouterMap  =  [ 
  { 
    路径：'/ permission' ，
    组件：布局，
    名称：'权限测试' ，
    meta：{  角色：[ 'admin' ，'super_editor' ]  }} ， //页面需要的权限
    子级：[ 
    {  
      路径：“索引” ，
      组件：权限，
      名称：“权限测试页” ，
      身份验证：“ A” //页面需要的权限码
    } ] 
  } ，
  {  路径：“ *” ， 重定向：“ / 404” ， 隐藏：true  } 
]] ；

路由递归过滤得到新的路由表注册即可，递归函数请手写

on question

这边 需要前后端共同维护一个路由码表 ? 管理员在勾选 前端路由的时候怎么去读取前端配置的路由