原文链接：https://blog.csdn.net/qq_43803757/article/details/126611216
权限管理：
你可以在后台通过一个tree控件或者其他展示形式给每一个页面动态配置权限，之后将这份路由表存储到后端。当用户登录后得到用户角色，前端根据roles去向后端请求可访问的路由表，从而动态生成可访问页面，之后就是router.addRoute动态挂载到router上。同样原理，登录时把按钮权限数据也返回给前端，在对应的页面进行按钮的权限控制。
前端权限的意义：
1.降低非法操作的可能性
2.尽可能的排除不必要的请求，减少服务器压力
3.提高用户体验
前端权限控制思路
1.菜单控制（管理系统的侧边栏）
在登录请求中，会得到权限数据。当然，这个需要后台返回数据的支持，前端根据权限数据，展示对应的菜单，才能查看相关的页面。
2.界面的控制
如果用户没有登录，手动在地址栏敲入管理界面的地址，则需要跳转到登录页面。
如果用户已经登录，手动输入非权限内的地址，则需要跳转到404页面。
3.按钮的控制
在某个菜单的界面中，还得根据权限数据，展示出可进行操作的按钮，比如新增、删除、修改、编辑。
4.请求和响应的控制
如果用户通过非常规操作，比如通过调试工具将某些禁用的按钮变成启用状态，此时发出的请求，也应该被前端拦截。
后台管理系统的权限管理
【菜单控制】登录后，获取到路由信息，并保存在vuex中，或保存在sessionStorage中
1.登录后刷新页面菜单栏消失，为什么，怎么解决？
因为登录过后重新加载时，vuex也被刷新，vuex初始值为[]，所以菜单栏消失。解决方法：保存在sessionStorage中一份，刷新后，取出重新注册路由信息。
【界面控制】正常的逻辑是通过登录界面，登录后跳转到管理平台页面。如果用户直接输入页面地址跳转，那么在哪个时机判断用户是否登录？
1.如何判断用户是否登录
sessionStorage.getItem('token');判断有token就是已登录，没有就是未登录。
2.什么时机判断
在路由导航全局守卫中router.beforeEach((to,from,next)=>{此处判断})
3.登录后输入一个不属于当前角色的路由地址，怎样阻止
路由是根据接口返回数据动态注册的，没权限的路由不会被注册
【按钮控制】有些角色虽然可以看到页面，但不允许操作界面上的一些按钮，此时我们使用自定义指令实现。
在用户登录时，接口返回当前用户的所拥有的按钮权限列表。新建一个自定义指令判断当前按钮是否包含在此列表中，如果在，则展示。不在则删除这个按钮元素。
【请求和响应的控制】
请求的控制：除登录之外的每次请求，都要带token，这样服务器才能鉴别你的身份。
axios.interceptors.request.use(function(req){
let token = session.getItem('token')
if(token){
req.headers['token'] = token
}
......
})
响应控制：得到服务器返回的状态码，如果token超时，则强制跳转到登录页面
axios.interceptors.response.use(function(res){ 在此处判断 })