react-router 5.0 的鉴权

当我们使用react-router 控制页面的路由时候,有些页面,是需要登录才能访问,有些不需要登录就可以访问,还有些页面,是根据用户的权限来限制访问的。

如果是传统的多页面,只需要后端鉴权就可以了,没权限就直接后端重定向。

但是单页面情况下,路由使用了 window.history.statepush 这种情况下,路由的改变,是不会向服务器发送页面请求的。所以需要前端来鉴权

一、参考vue的办法

在vue 里面 路由配置为 json 格式,所以很方便的使用 路由守卫 , 来控制权限。所以网上有一种办法,就是利用 react-router-config 来模仿 vue的路由鉴权。

其源码也不复杂。详细使用可以参考  。 通过研究以后发现,这似乎并不能满足我的要求,因为嵌套的子路由好像没有办法一次解决,也就是说,每个页面的嵌套子路由,要单独的配置json。并且似乎无法在父页面里面,对子页面的组件传props。

二、自己写一个类似的 Route 组件,并在其里面鉴权

新建一个 RouteGuard.tsx 源码如下。

import * as React from 'react';
import { Route, Redirect } from 'react-router-dom'; // interface GuardProps {
// path:string;
// component:React.Component;
// permissions?:any[];
// exact?:boolean|undefined;
// strict?:boolean|undefined;
// otherProps?:object;
// } // 可以由mobx注入用户信息
class Guard extends React.Component<any, any> {
constructor(props: any) {
super(props);
// 假设这里从 mobx 里面拿到了用户信息
const userinfo = {
level: 1 // 假设等级是一般用户
};
// 如果用户信息不存在,则需要去登录
let auth = true;
if (!userinfo) {
auth = false;
} else if (this.props.permissions) {
// 如果存在,说明是需要区别等级鉴权的
const permissions = this.props.permissions;
if (permissions.indexOf(userinfo.level) === -1) {
auth = false;
}
}
this.state = {
auth
};
}
public render() {
const ComponentPage = this.props.component;
return (
<Route
path={this.props.path}
exact={this.props.exact || false}
strict={this.props.strict || false}
render={props => {
return (
this.state.auth ? (
<ComponentPage {...props} {...this.props.otherProps} />
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}} />
) )
}
}
/>
);
}
}
export default Guard;

  

使用方式与 Rute 类似,只要在需要鉴权的页面,使用RouteGuard  组件就可以了,如果不需要鉴权的,依然可以继续使用原生的 route 组件:

import * as React from 'react';
import { Switch } from 'react-router-dom';
import RouteGuard from "src/RouteGuard";
import Index from "src/pages/main/Index/Index"; class Home extends React.Component<any>{
public componentDidMount(){
console.log(this.props);
}
public render() {
return (
<div className="_Home">
<div className="section base-container">
<Switch>
<RouteGuard path="" exact={true} component={Index} />
</Switch>
</div>
</div>
);
}
} export default Home;

  

总结:还可以继续加入一些判断,例如移动端和PC端的区别,来渲染不同的组件

react-router 5.0 的鉴权的更多相关文章

  1. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  2. React Router 4.0 实现路由守卫

    在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...

  3. 初步学习React Router 4.0

      React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...

  4. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  5. React Router 4.0 体验

    React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...

  6. React Router V4.0学习笔记

    最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...

  7. React Router 4.0 基本使用

    路由的概念,起初来源于服务端,就是当浏览器访问一个网站的不同页面时,服务端能够正确的返回页面的内容.当访问首页时,它能返回首页的内容,访问关于我们页面时,返回关于我们的内容.可以看到路由就是一种控制和 ...

  8. React Router 4.0 ---- 嵌套路由和动态路由

    嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...

  9. React Router 4.0中文快速入门

    import React from 'react' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' co ...

随机推荐

  1. Spring tools

    sts是什么? sts是spring tool suite的缩写,是基于eclipse的.开发spring应用的定制的开发环境. 提供了什么? 实现.调试.运行.部署spring应用的现成的环境.包括 ...

  2. qt sql 数据库操作

    1.  连接数据库 mysql连接: QSqlDatabase mysql_db=QSqlDatabase::addDatabase("QMYSQL","mysql_co ...

  3. iframe窗口嵌套,子窗口跳转重叠在父窗口的问题

    window.top //最顶层窗口 window.self //当前窗口 window.parent //父级窗口 "window.location.href"."lo ...

  4. linux物理内存与虚拟内存

    http://www.360doc.com/content/14/0123/14/14450281_347336709.shtml 1.查看内存占用情况 $ free -m -h total used ...

  5. 【Maven】为什么Maven dependencies有的jar包显示为灰色?

    因为它们的scope被限制住了,放开就恢复为亮白色. 来两张图片比对一下就清楚了: 没有限制scope,是正常的亮白色. 限制scope为test,显示为灰黑色. 其实颜色不重要,重要的是scope会 ...

  6. element-ui框架的el-dialog弹出框被遮罩层挡住了

    解决办法 在el-dialog标签里添加 :modal-append-to-body='false'

  7. 关于tomcat-users.xml添加用户被重复加载的问题mark

    今天用Eclipse启动tomcat带不起来项目,想进tomcat管理页面看我的工程是否已经发布,但是管理页面没有配置tomcat用户,于是进行tomcat-user.xml的用户添加. 本来想当然地 ...

  8. apk增加系统签名的方法

    1.命令行方法给apk加系统签名在Linux环境:java -Djava.library.path=. -jar signapk.jar platform.x509.pem platform.pk8 ...

  9. ISO/IEC 9899:2011 条款6.2.3——标识符的名字空间

    6.2.3 标识符的名字空间 1.如果一个特定标识符的多个声明在一个翻译单元的任意一点可见,那么语法上下文会区分对不同实体的引用.从而,对于标识符各种不同的类别具有独立的名字空间: ——标签名(通过标 ...

  10. mysql 1577、1548错误 解决方案

    mysql 1577.1548错误 解决方案 1.mysql版本: 5.5.12 2.问题原因: 使用Navicat导出数据库的提示 :1577 – Cannot proceed because sy ...