后台管理系统权限管理

原文链接：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){ 在此处判断 })