likes
comments
collection
share

React Router与权限管理

作者站长头像
站长
· 阅读数 29

背景

最近在做项目的权限管理这块,发现自己之前并没有做过,对前端如何进行权限管理也是知之甚少。于是网上找了几篇文章看看补了一下这方面知识,然后自己总结了一下打算写一篇关于权限管理的知识和大家分享。

对于大多数系统来说,通常需要的权限管理需求如下:

  • 如果用户尚未登录,则只能访问公共页面,例如登录页、首页等。
  • 如果已登录,可以访问普通页面。
  • 如果是管理员,则可以访问管理员页面。

根据以上梳理,我们有三种不同的角色,对应三种不同的权限。这三个权限还有层级关系,高级别的权限包含低级别的权限。因此我们的页面也可以分为三种类型的页面。

  • 公共页面:所有人可访问
  • 普通页面:普通用户可访问
  • 管理员页面:管理员可访问

需求讨论完毕,开始设计和写代码。

实现

权限管理和路由是分不开的。现在应用几乎都是单页面应用,路由放在前端管理,因此我们使用React Router来实现一个权限管理的模型。

本文代码已上传github:github.com/dessen-xu/r…

1. 初始化项目

为了方便,我们不再手动搭建一个React工程,直接使用create-react-app:

npx create-react-app react-router-auth

创建完成之后,删掉无用的css、js文件。最终的目录如下:

React Router与权限管理

React Router与权限管理

2. 完善页面

我们一共需要这么几个页面:布局组件、登录页、公共页、普通页面、管理员页面。

安装react-router。由于react-router-dom包里依赖了react-router包,因此我们只用下载前者就可以了:

npm i react-router-dom

安装完成后添加页面。新建coms文件夹,添加Admin, Layout, Login, Protected, Public组件,结果如下:

React Router与权限管理

然后添加路由配置。在index.js文件里添加BrowserRouter组件

React Router与权限管理

在App组件里配置路由路径,如下:

React Router与权限管理

同时修改Layout组件:

React Router与权限管理

此时简易路由配置已完成,所有页面都可访问。效果如下:

React Router与权限管理

3. 权限组件

用户信息、角色等是保存在数据库里的。用户登录时会返回用户信息、角色等字段,前端需要把这些信息保存下来。这里我们不再搭一套后台服务,使用前端模拟登录、登出等动作,并把用户信息保存在context中。

首先我们需要模拟登录、登出方法,把他们抽成一个组件auth.js。还需要AuthProvider组件,此组件用来向所有组件提供用户信息、登录、登出等方法。真实项目场景下,用户信息应该是存在store里,这里为了方便用context代替store。

React Router与权限管理

React Router与权限管理

用AuthProvider包裹App组件即可在项目内所有地方使用auth:

React Router与权限管理

auth简单使用如下:

React Router与权限管理

React Router与权限管理

想想我们想要的效果:当访问一个页面时,有权限则正常访问,无权限则跳转到登录页面。这样就需要一个父组件包裹需要权限校验的组件。我们命名为AuthRequired:

React Router与权限管理

4. 登录页

重写登录页: React Router与权限管理

此时针对未登录用户的权限校验已完成。打开项目,直接点击to protected,然后会跳到登录页:

React Router与权限管理

输入名字点击登录,然后自动跳转到protected页面。此时表示已登录,public和protected页面均可访问。

5. 管理员权限

接下来完善管理员权限。只需要在AuthRequired组件里加一种校验就好:

React Router与权限管理

在路由配置中用AuthRequired把Admin组件包起来,然后传入requiredAuth={'admin'}参数:

React Router与权限管理

再次修改登录页,添加管理员登录选项:

React Router与权限管理

此时若以管理员身份登录,则所有页面均可访问。若以普通用户登录,则admin页面访问不了:

React Router与权限管理

React Router与权限管理

完成收工。

总结

前端基于路由的权限校验方式很多,本文只是以自己的项目经历为例和大家分享一下,本文只是demo,实际情况要复杂,但是思路不变。如有错误或不足,欢迎指正。

相关链接