路由权限访问

静态路由： 本地配置固定的，所有人都可以访问的

动态路由： 每个人拥有的都不一样，根据他的权限来决定

思路一:

登录之后，后端根据该用户的角色查询该用户的权限信息，这些权限信息包含的标识是和本地完整的动态路由的 name 是有匹配关系的

我们登录之后拿到权限标识和本地的动态路由进行匹配筛选出属于当前用户的动态路由，然后通过router.addRoutes 方法，直接添加到路由实例中去

思路二:

登录之后，后端根据该用户的角色查询该用户的权限信息，而这些权限信息就是该用户的动态路由

我们只需要将动态路由里面的 component 字段值字符串转为真正的组件对象即可

然后通过 router.addRoutes 方法，直接添加到路由实例中去

//  获取当前用户所拥有的权限
let { data } = await axios.get('地址')
//  加工属于用户的动态路由
const asyncRoutes = data.map(item=>{
  return { 
    path:item.path,
    // component: '@/views/'+item.com   // 错误写法，因为只是路径字符串，而并非一个组件地址
    component: require('@/views/'+item.com).default
  }
})
//  添加到路由实例
router.addRoutes(asyncRoutes)

 

思路三:

登录之后，后端根据该用户的角色查询该用户的权限信息，而这些权限信息里面包含了用于可以访问的地址

我们在导航守卫中判断要去的地址是否在允许访问地址的白名单中

如果在就放行，如果不在就进行权限的访问鉴定