使用React-Router实现前端路由鉴权的示例代码


Posted in Javascript onJuly 26, 2020

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 文件夹,里面放入我们前面说的那几个页面:

使用React-Router实现前端路由鉴权的示例代码

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

import React from 'react';

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

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

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

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

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

import React from 'react';
import {
 BrowserRouter as Router,
 Switch,
 Route,
} from "react-router-dom";
import Home from './pages/Home';
import Login from './pages/Login';
import Backend from './pages/Backend';
import Admin from './pages/Admin';

function App() {
 return (
 <Router>
  <Switch>
  <Route path="/login" component={Login}/>
  <Route path="/backend" component={Backend}/>
  <Route path="/admin" component={Admin}/>
  <Route path="/" component={Home}/>
  </Switch>
 </Router>
 );
}

export default App;

然后可以在 Home 页面用 Link 加上跳转到其他页面的链接,这样就可以跳转了:

import React from 'react';
import { Link } from 'react-router-dom';

function Home() {
 return (
 <>
  <h1>首页</h1>
  <ul>
  <li><Link to="/login">登录</Link></li>
  <li><Link to="/backend">后台</Link></li>
  <li><Link to="/admin">管理员</Link></li>
  </ul>
 </>
 );
}

export default Home;

到现在我们的应用运行起来是这样的:

使用React-Router实现前端路由鉴权的示例代码

模块划分

虽然我们的跳转实现了,但是所有人都可以访问任何页面,我们前面的需求是要根据登录的角色限制访问的页面的,在写代码前,我们先来思考下应该怎么做这个。当然最直观最简单的方法就是每个页面都检测下当前用户的角色,匹配不上就报错或者跳回首页。我们现在只有几个页面,这样做好像也还好,但是如果我们的应用变大了,页面变多了,每个页面都来一次检测就显得很重复了,所以我们应该换个角度来思考这个问题。

仔细一看,其实我们总共就三种角色,对应三种不同的权限,这三个权限还有层级关系,高级别的权限包含了低级别的权限,所以我们的页面也可以按照这些权限分为三种:

  • 公共页面:所有人都可以访问,没登录也可以访问,包括网站首页和登录页
  • 普通页面:普通登录用户可以访问的页面
  • 管理员页面:只有管理员才能访问的页面

为了好管理这三种页面,我们可以将他们抽取成三个文件,放到一个独立的文件夹 routes 里面,三个文件分别命名为 publicRoutes.jsprivateRoutes.jsadminRoutes.js

使用React-Router实现前端路由鉴权的示例代码

对于每个路由文件,我们可以将这类路由组织成数组,然后 export 出去给外面调用,比如 publicRoutes.js

import Login from '../pages';
import Home from '../pages/Home';

const publicRoutes = [
 {
 path: '/login',
 component: Login,
 exact: true,
 },
 {
 path: '/',
 component: Home,
 exact: true,
 },
];

export default publicRoutes;

然后我们外面使用的地方直接改为:

import publicRoutes from './routes/publicRoutes';

function App() {
 return (
 <Router>
  <Switch>
  {publicRoutes.map(
   ({path, component, ...routes}) => 
   <Route key={path} path={path} component={component} {...routes}/>
  )}
  <Route path="/backend" component={Backend}/>
  <Route path="/admin" component={Admin}/>
  </Switch>
 </Router>
 );
}

这样我们的 App.js 里面就不会有冗长的路由路由列表了,而是只需要循环一个数组就行了。但是对于需要登录才能访问的页面和管理员页面我们不能直接渲染 Route 组件,我们最好再封装一个高级组件,将鉴权的工作放到这个组件里面去,这样我们普通的页面在实现时就不需要关心怎么鉴权了。

封装高级组件

要封装这个鉴权组件思路也很简单,前面我们将 publicRoutes 直接拿来循环渲染了 Route 组件,我们的鉴权组件只需要在这个基础上再加一个逻辑就行了:在渲染真正的 Route 组件前先检查一下当前用户是否有对应的权限,如果有就直接渲染 Route 组件,如果没有就返回某个页面,可以是登录页或者后台首页,具体根据自己项目需求来。所以我们的路由配置文件 privateRoutes.jsadminRoutes.js 里面的路由会比 publicRoutes.js 的多两个参数:

// privateRoutes.js
import Backend from '../pages/Backend';

const privateRoutes = [
 {
 path: '/backend',
 component: Backend,
 exact: true,
 role: 'user',  // 当前路由需要的角色权限
 backUrl: '/login' // 不满足权限跳转的路由
 },
];

export default privateRoutes;

adminRoutes.js 是类似的写法:

// adminRoutes.js
import Admin from '../pages/Admin';

const adminRoutes = [
 {
 path: '/admin',
 component: Admin,
 exact: true,
 role: 'admin',  // 需要的权限是admin
 backUrl: '/backend' // 不满足权限跳回后台页面
 },
];

export default adminRoutes;

然后就可以写我们的高级组件了,我们将它命名为 AuthRoute 吧,注意我们这里假设的用户登录时后端API会返回给我们当前用户的角色,一个用户可能有多个角色,比如普通用户的角色是 ['user'] ,管理员的角色是 ['user', 'admin'] ,具体的权限验证逻辑要看自己项目权限的设计,这里只是一个例子:

// AuthRoute.js
import React from 'react';
import { Route, Redirect } from 'react-router-dom';

function AuthRoute(props) {
 const {
 user: {
  role: userRole
 },
 role: routeRole,
 backUrl,
 ...otherProps
 } = props;

 // 如果用户有权限,就渲染对应的路由
 if (userRole && userRole.indexOf(routeRole) > -1) {
 return <Route {...otherProps} />
 } else {
 // 如果没有权限,返回配置的默认路由
 return <Redirect to={backUrl} />
 }
}

export default AuthRoute;

然后用我们的 AuthRoute 的渲染 adminRoutesprivateRoutes :

// ... 省略其他代码 ...

{privateRoutes.map(
 (route) => <AuthRoute key={route.path} {...route}/>
)}
{adminRoutes.map(
 (route) => <AuthRoute key={route.path} {...route}/>
)}

登录设置权限

在我们的 AuthRoute 里面用到了 user: { role } 这个变量,但是我们还没设置它。真实项目中一般是登录的时候后端API会返回当前用户的角色,然后前端将这个权限信息保存在一些状态管理工具里面,比如 Redux 。我们这里直接在 Login 页面写死两个按钮来模拟这个权限了,用户的配置就用根组件的 state 来管理了, Login 页面的两个按钮会改变对应的 state

import React from 'react';
import { Link } from 'react-router-dom';

function Login(props) {
 const {loginAsUser, loginAsAdmin, history} = props;

 const userLoginHandler = () => {
 loginAsUser();  // 调用父级方法设置用户权限
 history.replace('/backend');  // 登录后跳转后台页面
 }

 const adminLoginHandler = () => {
 loginAsAdmin();  // 调用父级方法设置管理员权限
 history.replace('/admin');  // 登录后跳转管理员页面
 }

 return (
 <>
  <h1>登录页</h1>
  <button onClick={userLoginHandler}>普通用户登录</button>
  <br/><br/>
  <button onClick={adminLoginHandler}>管理员登录</button>
  <br/><br/>
  <Link to="/">回首页</Link>
 </>
 );
}

export default Login;

到这里我们这个简单的路由鉴权就完成了,具体跑起来效果如下:

使用React-Router实现前端路由鉴权的示例代码

本文全部代码已经上传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 前端路由鉴权内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
Javascript与jQuery方法的隐藏与显示
Jan 19 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
JS求解两数之和算法详解
Apr 28 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
ES6学习教程之Promise用法详解
Nov 22 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 #Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 #Javascript
vuex分模块后,实现获取state的值
Jul 26 #Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 #Javascript
全面解析JavaScript Module模式
Jul 24 #Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 #Javascript
在Vuex中Mutations修改状态操作
Jul 24 #Javascript
You might like
PHP4之真OO
2006/10/09 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
angular.js中解决跨域问题的三种方式
2017/07/12 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
python在控制台输出进度条的方法
2015/06/20 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
tensorflow识别自己手写数字
2018/03/14 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
竞聘副主任科员演讲稿
2014/01/11 职场文书
小学毕业感言500字
2014/02/28 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
音乐会主持人开场白
2015/05/28 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书