如何使用React-Router实现前端路由鉴权

Reacr-Router 是React生态里面很重要的一环，现在React的单页应用的路由由基本都是前端自已管理的，而不像以前是后端路由，React管理路由的库常用的就是 React-Router。本文想写一下 React-Router的使用，但是光介绍API又太平淡了。而且官方文档已经写的很好了，我这里就用一个常见的开发场景来看看React-Router是怎么用的吧。我们一般的系统都会有用户访问权限的限制，某些页面可能需要用户具有一定的权限才能访问。本文就是用React-Router来实现一个前端鉴权模型。

应用示例

本文要实现的功能是大家经常遇到的场景，就是要控制不同的用户角色来访问不同的页面，这里总共有四个页面:

1. /index : 网站首页
2. /login : 登录页
3. /backend : 后台页面
4. /admin : 管理页面

另外还有三种角色:

1. 未登录用户 : 只能访问网站首页/index和登录页/login
2. 普通用户 : 可以访问网站首页/index,登录页/login和后台页面/backend
3. 管理员 : 可以访问管理页面/admin 和其他所有页面

引入React-Router

要实现路由鉴权，我们还得一步一步来，我们先用React-Router搭建一个简单的带有这几个页面的项目。我们直接用create-react-app创建一个新项目，然后建一个pages文件夹，里面放入我们前面说说的那几个页面：

 

我们页面先写简单点，先写个标题吧，比如这样:

import React from 'react';

function Admin() {
  return (
    <h1>管理员页面</h1>
  );
}
复制代码

其他几个页面也是类似的。

然后我们就可以在App.js里面引入React-Router做路由跳转，注意我们在浏览器上使用的是react-router-dom，新版的React-Router将核心逻辑层和展示层分开了，核心逻辑会处理路由匹配等，展示层会处理实际的跳转和路由变化的间监听，之所以这么分，是因为React-Router不仅仅需要支持浏览器，还需要支持React Native，这两个平台的监听和跳转是不一样的，所以现在React-Router下面有好几个包了:

1. react-router : 核心逻辑处理，提供一些公用的基类
2. react-router-dom : 具体实现浏览器相关的路由监听和跳转
3. react-router-native : 具体实现RN相关的路由监听和跳转

在实际使用时，我们一般不需要引用react-router，而是直接用react-router-dom就行，因为它自已会去引用react-router。下面我们在项目里面引入react-router-dom。

import React from 'react';

function Admin() {
  return (
    <h1>管理员页面</h1>import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
import Ho