在项目中，权限验证与安全性非常重要，是一开始就必须考虑和搭建的基础核心功能。我们所要做到的是：不同的权限对应着不同的路由，同时侧边栏也需根据不同的权限，异步生成。
思路
这里参考了vue-admin项目的代码：vue-element-admin权限验证篇，但是本项目的业务逻辑需求是每个页面的权限是动态配置的，而vue-admin项目中是写死预设的，不完全符合需求，故进行了改进（过去的一些项目中没用addRoute，权限控制代码里很多都是各种if/else的逻辑判断，代码相当的耦合和复杂，维护起来相当的困难，在vue2.2.0以后新增了router.addRoutes，就可相对方便的做权限控制了）。
前端会有一份公共的路由表，它表示了不需要权限，公共可访问的权限，如登录页面、主面板等，同时存储一份会根据权限变动的路由表，当用户登录之后，通过 token 获取用户的 role ，同时后端根据角色返回用户可以访问的菜单及内容信息，最后前端动态算出其对应有权限的路由，再通过router.addRoutes动态挂载路由。
但这些控制都只是页面级的，后端则会验证每一个涉及请求的操作，验证其是否有该操作的权限，每一个后台的请求不管是 get 还是 post 都会让前端在请求 header里面携带用户的 token，后端会根据该 token 来验证用户是否有权限执行该操作。若没有权限则抛出一个对应的状态码，前端检测到该状态码，做出相对应的操作。
实现步骤
- 创建vue实例的时候将vue-router挂载，但这个时候vue-router挂载一些登录或者不用权限的公用的页面。
- 当用户登录后，获取用户可访问的菜单name等信息，将信息和路由表每个页面的需要的权限作比较，生成最终用户可访问的路由表。
- 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由。
使用vuex管理路由表，根据vuex中可访问的路由渲染侧边栏组件。
前端存储的权限路由表：
const clientAsyncRoutes = [
{
path: "/form",
component: "Layout",
name: "form",
children: [
{
path: "index",
name: "form-1",
component: () => import("@/views/form/index"),
meta: { title: "Form", icon: "form" }
}
]
},
{
path: "/form2",
component: () => import("@/views/form2/index"),
name: "form2"
},
{
path: "/nested",
component: "Layout",
redirect: "/nested/menu1",
name: "nested",
meta: {
title: "Nested权限测试",
icon: "nested"
},
children: [
{
path: "menu1",
component: () => import("@/views/nested/menu1/index"),
name: "nested-1",
meta: { title: "Menu1" },
children: [
{
path: "menu1-1",
component: () => import("@/views/nested/menu1/menu1-1"),
name: "nested-1-1",
meta: { title: "Menu1-1" }
},
{
path: "menu1-2",
component: () => import("@/views/nested/menu1/menu1-2"),
name: "nested-1-2",
meta: { title: "Menu1-2" },
children: [
{
path: "menu1-2-1",
component: () =>
import("@/views/nested/menu1/menu1-2/menu1-2-1"),
name: "nested-1-2-1",
meta: { title: "Menu1-2-1" }
},
{
path: "menu1-2-2",
component: () =>
import("@/views/nested/menu1/menu1-2/menu1-2-2"),
name: "nested-1-2-2",
meta: { title: "Menu1-2-2" }
}
]
}
]
},
{
path: "menu2",
name: "nested-2",
component: () => import("@/views/nested/menu2/index"),
meta: { title: "menu2" }
}
]
}
];
登陆时后端返回的可访问菜单数据：
const serverRouter = [
{
name: "form",
children: [{ name: "form-1", content: ["aa", "bb"] }]
},
{
name: "form2",
},
{
name: "nested",
children: [
{
name: "nested-1",
children: [
{ name: "nested-1-1" },
{
name: "nested-1-2",
children: [{ name: "nested-1-2-2", content: ["c", "d"] }]
}
]
},
]
}
];
前端对数据进行遍历和重组，最终递归生成动态路由数据：
//生成路由表部分代码
function makePermissionRouters(serverRouter, clientAsyncRoutes) {
const res = [];
clientAsyncRoutes.map(ele => {
for (let i = 0; i < serverRouter.length; i++) {
const element = serverRouter[i];
if (ele.name === element.name) {
const tmp = deepClone(ele);
if (element.content) {
tmp.meta.content = element.content;
}
if (element.children) {
tmp.children = makePermissionRouters(
element.children,
ele.children
);
}
res.push(tmp);
}
}
});
return res;
}
//生成的动态路由
const Routes = [
{
path: "/form",
component: "Layout",
name: "form",
children: [
{
path: "index",
name: "form-1",
component: () => import("@/views/form/index"),
meta: { title: "Form", icon: "form", content: ["aa", "bb"] }
}
]
},
{
path: "/form2",
component: () => import("@/views/form2/index"),
name: "form2"
},
{
path: "/nested",
component: "Layout",
redirect: "/nested/menu1",
name: "nested",
meta: {
title: "Nested权限测试",
icon: "nested"
},
children: [
{
path: "menu1",
component: () => import("@/views/nested/menu1/index"), // Parent router-view
name: "nested-1",
meta: { title: "Menu1" },
children: [
{
path: "menu1-1",
component: () => import("@/views/nested/menu1/menu1-1"),
name: "nested-1-1",
meta: { title: "Menu1-1" }
},
{
path: "menu1-2",
component: () => import("@/views/nested/menu1/menu1-2"),
name: "nested-1-2",
meta: { title: "Menu1-2" },
children: [
{
path: "menu1-2-2",
component: () =>
import("@/views/nested/menu1/menu1-2/menu1-2-2"),
name: "nested-1-2-2",
meta: { title: "Menu1-2-2", content: ["c", "d"] }
}
]
}
]
}
]
}
];
这里我根据 vue-router官方推荐 的方法通过meta标签来标示改页面能访问的权限有哪些。如meta: {content: ["c", "d"] }表示该页面用户拥有查看c和d内容区域的权限。
若需要查看所有用户权限，如管理员编辑角色权限分配时，后台只需返回 每个角色可访问的菜单数据便可，结构同登录时相同，如：
const data = [
{
username: "user1",
role: "admin",
route: [
{
name: "form",
children: [{ name: "form-1", content: ["aa", "bb"] }]
},
{
name: "form2"
}
]
},
{
username: "user2",
role: "editor",
route: [
{
name: "form",
children: [{ name: "form-1", content: ["aa", "bb"] }]
}
]
}
];
管理员可以用树形图的方式勾选编辑权限，进行用户的权限分配。