前端权限控制

目录

• 前端权限控制思路
  • 1. 菜单控制
  • 2. 界面控制
  • 3. 按钮控制
  • 4. 请求和响应的控制

---

回到顶部

前端权限控制思路

1. 菜单控制

1.1 权限信息需要在多个组件中共享，需要用到 redux

1.2 防止刷新页面，权限数据丢失，所以需要存储在 cookie 或者 localStorage 或者 sessionStorage 中

1.3 存储、保存用户信息

用户输入地址进入系统之后，立刻从 cookie 或者 localStorage 或者 sessionStorage 中获取用户信息，存到到全局对象中（比如redux）。

• cookie：判断用户权限，通常用 cookie ，因为每个请求都会带上，原生表单甚至静态文件都能带上，这样在 web 端就不用另写代码来传送用户鉴权信息。问题：cookie 内容过多会浪费带宽，所以量大的数据不能使用 cookie 来存储，此时需要考录 localStorage 和 sessionStorage。
• localStorage：除非被清除，否则永久保存，今天存储的数据，明天还能读取。（注意：react 项目中不能使用 componentWillUnmount 来清除用户信息，我们可以借助原生事件
  onbeforeunload 来清除window.addEventListener("beforeunload", () => {console.log("清除用户信息")});）
• sessionStorage 只在当前会话下有小，跨页面和关闭页面后失效。

2. 界面控制

2.1 如果用户没有登录，手动在地址栏中输入地址，则需要跳转到登录页面

2.2 如果用户已登录，可是手动输入非权限内的地址，则需要跳转到404界面

3. 按钮控制

如果用户的权限时可以查看页面，却没有操作权限，此时需要对响应的操作按钮进行权限的控制。为了用户的体验，可以选择隐藏按钮或者置灰。
解决办法：对按钮进行封装，或者用高阶组件进行包裹。高阶组件中会进行权限的逻辑判断，控制按钮的状态。

4. 请求和响应的控制

如果用户通过非常规操作，比如通过浏览器调试工具将某些禁用的按钮变成开启状态，此时发送的请求，也需要被前端拦截。
解决办法：前端可以通过封装统一的 fetch 或者 ajax，并在发送请求之前，进行用户权限的判断。拦截非权限内的请求。