说点儿闲话
本文是作者最近查阅权限控制相关资料的总结笔记。
路由权限控制
前端路由是全部都由后端返回，还是后端返回对应角色下的权限，然后前端通过遍历的方式来修改当前路由呢？
引用上面这个问题的采纳答案：
总结补充：
第一种是指动态路由，路由是分两部分，一部分是home、login等无权限需求路由，一部分是由后端返回的该用户权限下的路由，当用户登录后得到 roles，前端根据roles 去向后端请求可访问的路由表，从而动态生成可访问页面，之后就是 router.addRoutes 动态挂载到 router 上；前端需要有菜单管理,可以通过修改路由数据来自定义前端的菜单结构，拓展性更好。
第二种是前端配置路由表，后端仅返回权限，前端需要有菜单的权限管理，并且加载路由和菜单时要做权限验证；该方法是针对菜单结构相对稳定的项目，一般不支持结构变动。
按钮权限控制
视图控制
依据权限实现的按钮显隐控制和界面变化:
方法一：v-if
方法二：自定义指令
所以，最好是使用自定义指令。
划重点：让按钮和请求联系起来，比如说按钮涉及一个名称为A的请求，那么权限指令可以这样写:
<btn v-has="A" @click="Fn">按钮</btn>const A = {
p: ['put,/menu/**'],
r: params => {
return axios.put(`/menu/${params.id}`, params)
}
};//用作权限：
<btn v-has="[A]" @click="Fn">按钮</btn>
//用作请求：
function Fn(){
A.r().then((res) => {})
}请求控制
利用axios拦截器实现的，目的是将越权请求在前端拦截掉。在请求拦截器中判断本次请求是否符合用户权限，以决定是否拦截。在请求发起前集中拦截，这时可以直接根据请求方法和请求地址来校验权限。
参考资料
前端路由是全部都由后端返回，还是后端返回对应角色下的权限，然后前端通过遍历的方式来修改当前路由呢？