vue实现菜单权限控制

 

需求：

当前系统登录用户具有不同的角色，前端页面需要针对不同角色用户来展现不同的菜单，从而需要实现菜单权限控制功能。

思路：

1. 获取后台返回的菜单数据；
2. 根据菜单数据遍历加载需要的菜单路由，没有权限的菜单路由就不加载；
3. 使用全局守卫导航配合实现。
4. 特别说明：如果所有的菜单路由都加载，当用户在地址栏中输入路由路径就可以访问没有权限的菜单页面，这样就达不到菜单权限控制的需求；如果所有的菜单都加载并且使用全局守卫导航，在每次跳转路由的时候都去判断当前用户是否有这个权限，再决定是否跳转，这样虽然可行，但是考虑到前端性能的问题，还具有优化的空间。

具体步骤

1. 新建2个路由文件，一个用于存放公共路由(router.js)，一个用于引入所有的路由(components.js)，如下

   router.js
   //通用页面路由
   const router = new Router({
     // mode:"history",
     routes: [
       {
         path: "/",
         redirect: "/login"
       },
       {
         path: "/login",
         name: "login",
         component: Login
       }
     ]
   })

   components.js
   const workplace = require("@/components/workplace/Workplace.v