关于门户的前端权限控制

1.路由层面

1.1 router.beforeEach()

• 在路由定义时添加meta的一个属性，来控制判断该页面是否需要登录权限

1.2 动态路由 （DynamicRoutes）

• 定义好需要动态挂载的路由，区分是分为初始路由和根据role角色来动态挂载的“用户路由”，比如constantRoutes和 asyncRoutes

• router.beforeEach 添加 router.addRoutes 事件 文档链接?

为了防止重复配置相同路由，在添加路由之前判断是否已经存在角色权限

• 获取拥有权限的路由，generateRoutes的实现

通过递归的方式去过滤去用户的路由权限，通过router.addRoutes()动态添加所有符合权限的路由，当然这种方式需要依赖后端。对于不同角色的用户，是由后端将路由列表告诉给前端注册

答：你在路由文件中定义resetRouter的方法,新建一个全新的 Router，然后将新的 Router.matcher 给当前的Router，在登出的模块中调用resetRouter方法

总结：

• beforeEach 是需要靠我们手动去帮 vue-router “辨别哪些页面可以访问，哪些不可以 ”
• addRoutes 则是通过注入路由配置告诉 vue-router “我就只认这些路由，其它路由地址跟我无关”

2.视图层面

2.1 指令控制

通过自定义权限指令v-auth来实现按钮权限控制，通过传入权限角色数组列表,来控制元素是否显示

答：因为 v-show 的话，dom其实没有隐藏，用户可以改变display就看到，v-if呢，则是删除之后会遗留备注<!-- -->

思考? : 如果要实现按钮显示但是禁用的情况，上面的例子应该如何修改？

? 推荐阅读：

• vue-element-admin后台前端解决方案
• 手摸手，带你用vue撸后台 系列二(登录权限篇)

3.接口层面

• 请求头添加 token认证，或者也可以直接使用cookie中的授权信息，前提是要配置 withCredentials为true，也就是axios.defaults.withCredentials = true, 开启withCredentials后，服务器才能拿到你的cookie

• 拦截器拦截接口返回结果，比如401没有登录权限。

?酱往期文章：

• 树酱的前端知识体系构建（上）
• 树酱的前端知识体系构建（下）
• 聊聊前端开发日常的协作工具
• babel配置傻傻看不懂
• 如何更好管理 Api 接口
• 面试官问你关于node的那些事
• 前端工程化那些事
• 你学BFF和Serverless了吗
• 前端运维部署那些事

请你喝杯? 记得三连哦～

1.阅读完记得给? 酱点个赞哦，有? 有动力

2.关注公众号前端那些趣事，陪你聊聊前端的趣事

3.文章收录在Github frontendThings 感谢Star✨