前端的权限控制问题解决方案（前端权限控制（一）：前端权限管理及动态路由配置方案）
权限控制
在项目中 ，尤其是在后台管理系统中 ，不同人员登陆 ，看到的页面菜单是不一样的 ，比如 ，一个公司的办公系统 ，超级管理员登陆可以看到所有的页面 ，而普通员工账号登录可能无法看到人员管理等页面 ，比如公司的员工个人资料页面只有人力资源部门有权利看 ，其他部门的员工是不允许查看公司员工信息数据的 。当然了除了页面的权限 ，还会有一些按钮级别的权限 ，比如一个下载按钮 ，有的帐号可以用 ，有的人不能用 ，比如人员账号管理中 ，一个页面中有一个确认添加 、删除该账号人员按钮 ，这个按钮只有管理员有权利点击 ，其他人员登陆是无法点击的 。
页面级权限控制
当前系统方案为：前端路由信息完全写死 ，并且动态生成页面菜单 。自己本身的router.js文件定义好页面所有的路由 。这种方式弊端很明显 ，并不能实现真正的权限控制 ，因为如果用户记住了某个理由 ，用户不点击菜单 ，直接在地址栏里输入地址 ，那么页面还是可以显示出来 。
所有方案前提：登录成功后后台返回当前登录用户权限code（或者name 、role ，名称沟通后自定义） ，前端存储在vuex中 。
方案一：
前端只在路由跳转时做权限判断 。
方案一改动当前代码量最小 ，无需后端改动 ，前端路由和侧边栏显示不变 ，在对需要权限区分的路由在跳转时候添加前置路由守卫router.beforeEach ，进行当前权限判断 ，不满足权限的跳转到相应页面（自定义401 、404页面等） ，但该方案不能实现真正的权限控制 。
router.beforeEach((to, from, next) => { if (store.getters.roles.length === 0) { // 判断是否保存有权限信息 const roles = store.getters.roles; if (roles !== admin) { // 不为管理员 if (to.path === /faultInfo) { next({ path: /401 }) } else { next() } } else { next() } } else { next(/login); } });方案二：
后端返回路由权限名 ，前端存储完整路由权限表 ，并动态生成路由 。
建议看大神的文档 ，已经写的很详细了：手摸手 ，带你用vue撸后台 系列二(登录权限篇) - 掘金
以下是自己实现思路：
建议登录login和返回用户路由信息get_user_info两件事分开请求比较好 。
步骤：
· 登录：当用户填写完账号和密码后向服务端验证是否正确 ，验证通过之后 ，服务端会返回一个token ，拿到token之后（将这个token存贮到cookie中 ，保证刷新页面后能记住用户登录状态） ，前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限 ，用户名等等信息） 。
· 权限验证：通过token获取用户对应的 role ，动态根据用户的 role 算出其对应有权限的路由 ，通过 router.addRoutes 动态挂载这些路由 。
数据和操作都可存储至vuex全局管理 。(刷新页面后 vuex的内容也会丢失 ，所以需要重复get_user_info的操作)
权限控思路：前端会有一份路由表 ，它表示了每一个路由可访问的权限 。当用户登录之后 ，通过 token 获取用户的 role ，动态根据用户的 role 算出其对应有权限的路由 ，再通过router.addRoutes动态挂载路由 。
创建vue实例的时候将vue-router挂载 ，但这个时候vue-router挂载一些登录或者不用权限的公用的页面 。 当用户登录后 ，获取用role ，将role和路由表每个页面的需要的权限作比较 ，生成最终用户可访问的路由表 。 调用router.addRoutes(store.getters.addRouters)添加用户可访问的路由 。 使用vuex管理路由表 ，根据vuex中可访问的路由渲染侧边栏组件 。方案二开始 ，路由分为两种：constantRoutes 和 asyncRoutes 。
constantRoutes： 代表那些不需要动态判断权限的路由 ，如登录页 、404 、等通用页面 。
asyncRoutes： 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面 。
//固定路由 const constantRoutes = [ { path: /, redirect: /login, }, { path: /login, name: 登录页面, component: ()=>import("@/views/login.vue") }, { path: /404, name: 404页面, component: ()=>import("@/views/404.vue") }, { path: /401, name: 401页面, component: ()=>import("@/views/401.vue") }, ]需要权限路由：字段roles ，表示当前路由所需要的权限 。
// 需要权限路由 export const asyncRoutes = [ { path: /permission, name: permissionhome, meta: { icon: el-icon-setting, roles: [admin,superadmin] }, component: ()=>import("@/views/permission.vue") }, { path: /detail, name: detail, meta: { icon: el-icon-setting, roles: [superadmin] }, component: ()=>import("@/views/detail.vue") },使用addRoutes方法动态添加路由并进行权限判断：
// main.js const whiteList = [/login] // 免登陆页面 router.beforeEach((to, from, next) => { if (store.getters.token) { // 判断是否有token if (to.path === /login) { next({ path: / }); } else { if (store.getters.roles.length === 0) { // 判断用户是否游user_info信息 store.dispatch(GetInfo).then(res => { // 获取info const roles = res.data.role; store.dispatch(GenerateRoutes, { roles }).then(() => { // 生成可访问的路由表 router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 }).catch(err => { console.log(err); }); } else { next() //当有用户权限的时候 ，说明所有可访问路由已生成 如访问没权限的全面会自动进入404页面 } } } else { if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单 ，直接进入 next(); } else { next(/login); // 否则全部重定向到登录页 } } });方案三：
登陆成功之后直接由后端返回异步路由表 ，然后前端直接通过addRoutes方法添加 。前端添加用户页面权限配置页面 。
实现方式应该跟方案二差不多 ，具体实现还需跟后端人员沟通讨论 。
实现步骤：前端权限控制（二）：VUE-router.addRoutes根据后台接口传递数据生成动态路由 ，前端拿到配置并生成侧边栏-实现页面级权限控制
按钮级权限控制
方案一：
在获取到用户的role之后 ，在前端用v-if手动判断来区分不同权限对应的按钮的 。或者将它封装成一个自定义指令使用 。
方案二：
在页面级权限控制方案三基础上来操作 ，后端返回异步路由表中添加页面按钮权限字段 ，前端根据返回表来显示操作按钮 。
具体实现：前端权限控制（三）：根据后台接口数据传递页面按钮权限-实现按钮级权限控制
方案三：
不同权限的用户显示不同的侧边栏和限制其所能进入的页面 ，后端验证每一个涉及请求的操作 ，验证其是否有该操作的权限 ，每一个后台的请求 get 或者 post 前端都在请求 header里面携带用户的 token ，后端根据该 token 来验证用户是否有权限执行该操作 。若没有权限则抛出一个对应的状态码 ，前端检测到该状态码 ，做出相对应的操作 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！