路由权限记录 尚硅谷200集

固定路由

比如404 login home等页面无论谁登录都能进行查看

//路由的配置：为什么不同用户登录我们的项目，菜单（路由）都是一样的？
//因为咱们的路由‘死的’，不管你是谁，你能看见的，操作的菜单都是一样的
//需要把项目中的路由进行拆分
​
//常量路由:就是不关用户是什么角色，都可以看见的路由
//什么角色（超级管理员，普通员工）：登录、404、首页
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
​
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
​
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard' }
    }]
  },
]

异步路由

需要进行过滤的权限页面

 

任意路由

重定向到404页面的路由

 

---

登录接口

登录后从后端接口获得token值

1.利用vueX将获得的token存储到全局或者存储到cookies中

本地持久化存储可以用cookies也可以用本地储存

（尚硅谷是在vuex中发送请求的，比较不一样，但是请求原理是一样的）

 

2.获取到唯一token值后调用接口 获取用户信息

 

 

菜单权限的实现

起始不同的用户（角色），登录的时候会向服务器发请求，服务器会把用户相应的菜单的权限的信息，返回给我们

我们可以根据服务器返回的数据（信息），可以动态的设置路由，可以根据不同的用户展示不同的菜单。

菜单权限:当用户获取用户信息的时候，服务器会把相应的用户拥有菜单的权限信息返回，需要根据用户身份对比出，当前这个用户需要展示哪些菜单

将异步路由 asyncRouters与后台获取到的路由进行对比

 

这里运用函数 过滤与递归进行路由的整合

​

//定义一个函数：两个数组进行对比，对比出当前用户到底显示哪些异步路由
 const computedAsyncRoutes = (asyncRoutes,routes)=>{
     //过滤出当前用户【超级管理|普通员工】需要展示的异步路由
    return asyncRoutes.filter(item=>{
         //数组当中没有这个元素返回索引值-1，如果有这个元素返回的索引值一定不是-1 
        if(routes.indexOf(item.name)!=-1){
          //递归:别忘记还有2、3、4、5、6级路由
          if(item.children&&item.children.length){
              item.children = computedAsyncRoutes(item.children,routes);
          }
          return true;
        }
     })
 }
 

然后再将函数计算出的异步路由和固定路由、任意路由进行整合

 

采用addRoutes进行动态路由添加

潘xx的路由遍历需要再Sidebar里头进行更改

 

 

这样就能够做到菜单栏的显示

这个问题需要后端对路由全部进行子路由写法而不是一股脑的处理