使用React-Router实现前端路由鉴权的示例代码
React-Router 是React生态里面很重要的一环，现在React的单页应用的路由基本都是前端自己管理的，而不像以前是后端路由，React管理路由的库常用的就是就是 React-Router 。本文想写一下 React-Router 的使用，但是光介绍API又太平淡了， 而且官方文档已经写得很好了 ，我这里就用一个常见的开发场景来看看 React-Router 是怎么用的吧。而我们一般的系统都会有用户访问权限的限制，某些页面可能需要用户具有一定的权限才能访问。本文就是用 React-Router 来实现一个前端鉴权模型。
本文全部代码已经上传GitHub，大家可以拿下来玩玩：https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/React/react-router-usage
应用示例
本文要实现的功能是大家经常遇到的场景，就是要控制不同的用户角色来访问不同的页面，这里总共有四个页面：
- /index: 网站首页
- /login: 登录页
- /backend：后台页面
- /admin：管理页面
另外还有三种角色：
- 未登录用户：只能访问网站首页/index和登录页/login
- 普通用户：可以访问网站首页/index，登录页/login和后台页面/backend
- 管理员：可以访问管理页面/admin和其他所有页面
引入React-Router
要实现路由鉴权，我们还得一步一步来，我们先用React-Router搭建一个简单的带有这几个页面的项目。我们直接用 create-react-app 创建一个新项目，然后建了一个 pages 文件夹，里面放入我们前面说的那几个页面：
模块划分
虽然我们的跳转实现了，但是所有人都可以访问任何页面，我们前面的需求是要根据登录的角色限制访问的页面的，在写代码前，我们先来思考下应该怎么做这个。当然最直观最简单的方法就是每个页面都检测下当前用户的角色，匹配不上就报错或者跳回首页。我们现在只有几个页面，这样做好像也还好，但是如果我们的应用变大了，页面变多了，每个页面都来一次检测就显得很重复了，所以我们应该换个角度来思考这个问题。
仔细一看，其实我们总共就三种角色，对应三种不同的权限，这三个权限还有层级关系，高级别的权限包含了低级别的权限，所以我们的页面也可以按照这些权限分为三种：
- 公共页面：所有人都可以访问，没登录也可以访问，包括网站首页和登录页
- 普通页面：普通登录用户可以访问的页面
- 管理员页面：只有管理员才能访问的页面
为了好管理这三种页面，我们可以将他们抽取成三个文件，放到一个独立的文件夹 routes 里面，三个文件分别命名为 publicRoutes.js ， privateRoutes.js ， adminRoutes.js ：
本文全部代码已经上传GitHub，大家可以拿下来玩玩： https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/React/react-router-usage
总结
React-Router可以用来管理前端的路由跳转，是React生态里面很重要的一个库。React-Router为了同时支持浏览器和React-Native，他分拆成了三个包react-router核心包，react-router-dom浏览器包，react-router-native支持React-Native。使用时不需要引入react-router，只需要引入需要的平台包就行。- 对于需要不同权限的路由，我们可以将他们拎出来分好类，单独建成一个文件，如果路由不多，放在一个文件导出多个数组也行。
- 对于需要鉴权的路由，我们可以用一个高级组件将权限校验的逻辑封装在里面，其他页面只需要加好配置，完全不用关心鉴权的问题。
本文内容偏简单，作为熟悉 React-Router 的用法还不错，但是我们不能只会用，还要知道他的原理。下篇文章我们就来看看 React-Router 的源码里面蕴藏了什么奥秘，大家可以点个关注不迷路，哈哈~
参考资料
官方文档：https://reactrouter.com/web/guides/quick-start
GitHub源码地址：https://juejin.im/post/5e3ffc85518825494e2772fd
到此这篇关于使用React-Router实现前端路由鉴权的示例代码的文章就介绍到这了,更多相关React-Router 前端路由鉴权内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！
