背景

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

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

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

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

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

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

实现

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

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

1. 初始化项目

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

npx create-react-app react-router-auth

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

2. 完善页面

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

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

npm i react-router-dom

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

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

在App组件里配置路由路径，如下：

同时修改Layout组件：

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

3. 权限组件

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

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

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

auth简单使用如下：

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

4. 登录页

重写登录页：

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

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

5. 管理员权限

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

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

再次修改登录页，添加管理员登录选项：

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

完成收工。

总结

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

相关链接

• react-router官方文档
• react context 官方介绍