目录
1.相关概念
1.1 概念
前端权限的控制本质上来说,就是控制前端的视图层的展示和前端所发送的请求。
1.2 意义
- 降低非法操作的可能性:在页面中展示出一个 就算点击了也最终会失败的按钮,势必会增加有心者非法操作的可能性。
- 尽可能排除不必要请求,减轻服务器压力:没必要的请求,不具备权限的请求,应该就不需要发送,请求少了,减轻服务器压力
- 提高用户体验:根据权限显示内容,避免界面上给用户带来的困扰。
2.控制思路
2.1 菜单的控制
在登陆请求中,会得到后台返回的权限数据,展示对应菜单,点击菜单才能查看相关的界面。
2.2 界面的控制
如果用户没有登录,手动在地址栏敲入地址,则跳转到登录界面
如果用户已经登录,可是手动敲入非权限内的地址,则需要跳转404界面
2.3 按钮的控制
在某个界面总,根据权限数据,展示出可进行操作的按钮,比如:删除,修改,增加
2.4 请求和响应的控制
如果用户通过非常规操作,比如通过浏览器调试工具将某些禁用的按钮变成启用状态,此时发的请求,也应该被前端拦截。
3. Vue的权限控制实现
3.1 菜单的控制
后台返回的菜单数据,直接渲染。
3.2 界面的控制
1.正常的逻辑是通过登录界面,登陆成功后跳转到管理平台界面,但是如果用户直接敲入管理平台的地址,也是可以跳过登录的步骤,所以应该在某个时机判断用户是否登陆,防止用户跳过登录界面。
- 如何判断是否登陆
登录成功,将token存入sessionStorage中, 判断token是否存在。
- 什么时机
路由导航守卫
2.登录后,虽然菜单已经被控制住了,但是路由信息还是完整的存在于浏览器,比如A用户并不具备角色这个菜单,但是他如果自己在地址栏中敲入角色页的地址,依然可以访问角色界面。
- 路由导航守卫
路由导航守卫可以在每次路由地址 发生变化时,从vuex中获取权限列表,判断要访问的界面,是否有权限。但是!!从另外角度想,没有权限的路由根本就不应该存在,接下来的动态路由。
- 动态路由
路由界面定义方法,在登陆界面根据用户所具备的权限,动态添加路由规则,修改完后再通过addRoutes来更改当前路由。
登陆成功后调用,修改路由
登陆成功后,刷新界面时,修改路由
3.3 按钮控制
用户界面的一些按钮根据权限控制显示,隐藏、禁用。这块逻辑放在自定义指令中。
按钮上增加相应的自定义指令。(需要禁止按钮可以再传新参数)
3.4 请求和响应的控制
请求控制
- 除了登录请求,都要带上token,这样服务器才能鉴别身份。
- 如果发出非权限内的请求,应该在前端进行阻止。(服务器肯定也会阻止)
响应的控制
- 服务器返回的状态码401,代表token超时或者被篡改,此时应强制跳转到登录界面
4.总结
4.1 菜单控制
- 权限数据需要在多组件之间共享,因此采用vuex。
- 防止刷新界面权限数据丢失,所以需要存储在sessionStorage,并且保证两者同步。
4.2 界面控制
- 路由的导航守卫可以防止跳过登录界面。
- 动态路由可以让不具备权限的界面路由就不存在。
4.3 按钮控制
- 路由规则中可以增加路由的原数据meta
- 通过路由对象可以得到当前的路由规则,以及存储在此规则中的meta数据
- 自定义指令可以很方便的实现按钮控制
4.4 请求和响应控制
- 请求拦截器和响应拦截器的使用
- 请求方式的约定restful