后台管理系统：权限控制的设计

发表于 本文字数： 843 阅读时长 ≈ 1 分钟

# 背景

# 意义

# 权限的分类

# 后端权限

  • 从根不上讲前端仅仅只是视图层的展示，权限的核心是在于服务器中的数据变；
  • 所以后端才是权限的关键，后端权限可以控制某个用户是否能够查询数据， 是否能够修改数据等操作

# 前端权限

  • 前端权限的控制本质上来说， 就是控制端的视图层的展示和前端所发送的请求。
  • 但是只有前端权限控制没有后端权限控制是万万不可的。

# 前端权限的意义

  • 如果仅从能够修改服务器中数据库中的数据层面上讲， 确实只在后端做控制就足够了， 那为什么越来越多的项目也进行了前端权限的控制， 主要有这几方面的好处

  • 降低非法操作的可能性
    不怕赃偷就怕贼惦记， 在页面中展示出一个就算点击了也最终会失败的按钮，势必会增加有心者非法操作的可能性

  • 尽可能排除不必要清求， 减轻服务器压力
    没必要的请求，操作失败的清求，不具备权限的清求，应该压根就不需要发送，请求少了，自然也会减轻服务器的压力

  • 提高用户体验
    根据用户具备的权限为该用户展现自己权限范围内的内容，避免在界面上给用户带来困扰，让用户专注于分内之事

# 前端权限控制的设计思路

# 菜单权限

  • 在登录请求中， 会得到权限数据。前端根据权限数据， 展示对应的菜单，点击菜单才能查看相关的界面

# 按钮 / 超链接权限

  • 在某个菜单的界面中， 还得根据权限数据， 展示出可进行操作的按钮，比如删除， 修改， 增加

# 界面控制权限

  • 如果用户没有登录， 手动在地址栏敲入管理界面的地址， 则需要跳转到登录界面
  • 如果用户已经登录， 如果手动敲入非权限内的地址， 则需要跳转 404 界面

# 请求和响应的控制

  • 如果用户通过非常规操作， 比如通过浏览器调试工具将某些禁用的按钮变成启用状态， 此时发的请求， 也应该被前端所拦截

# 前端权限控制的实现

# 权限菜单栏控制

  • 用户登录之后服务端返回一个数据，这个数据有菜单列表和 token，我们把这个数据放入到 vuex 中，然后主页根据 vuex 中的数据进行菜单列表的渲染
    问题： 刷新界面 vuex 数据消失，菜单栏消失
    解决： 将数据存储在 sessionStorage 中，并让其和 vuex 中的数据保持同步

# 界面的控制

  • 路由导航守卫
  • 动态路由