react路由守卫(路由拦截)

react路由守卫(路由拦截)react不同于vue,通过在路由里设置meta元字符实现路由拦截。在使用Vue,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到404或者登陆页面,比如Vue中的beforeEnter函数:…router.beforeEach(async(to,from,next)=>{consttoPath=to.path;constfromPath=from.path;})…react实现路由拦截的基

大家好,又见面了,我是你们的朋友全栈君。

欢迎大家进群,一起探讨学习

欢迎大家进群,一起讨论学习

微信公众号,每天给大家提供技术干货

在这里插入图片描述

博主技术笔记

博主网站地址1

博主网站地址2

博主开源微服架构前后端分离技术博客项目源码地址,欢迎各位star

react不同于vue,通过在路由里设置meta元字符实现路由拦截。在使用 Vue ,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函数:

...
router.beforeEach(async(to, from, next) => { 
   
    const toPath = to.path;
    const fromPath = from.path;
})
...

react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件来实现不同的组件的跳转,从而实现拦截。在之前的版本中,React Router 也提供了类似的 onEnter 钩子,但在 React Router 4.0 版本中,取消了这个方法。React Router 4.0 以后采用了声明式的组件,路由即组件,要实现路由守卫功能,就得我们自己去写了。
如果不使用路由守卫,Router 组件是这样子的:

import * as React from 'react';
import { 
    HashRouter,Switch,Route,Redirect } from 'react-router-dom';
 
import Index from "./page/index";
import Home from "./page/home";
import ErrorPage from "./page/error";
import Login from "./page/login";
 
export const Router = () => (
    <HashRouter>
        <Switch>
            <Route path="/" exact component={ 
   Index}/>
            <Route path="/login" exact component={ 
   Login}/>
            <Route path="/home" exact component={ 
   Home}/>
            <Route path="/404" exact component={ 
   ErrorPage}/>
            <Redirect to="/404" />
        </Switch>
    </HashRouter>
);

上面的 Router 组件,包含了三个页面:

登陆
主页
404 页面
以及四个路由:
根路由
登陆路由
主页路由
404 路由
其中,根路由和 /home 路由,都定向到了主页路由。
以上是一个基本的路由定义,可以在登陆/主页和 404 页面之间来回跳转,但也有一些问题:
非登陆状态下,可以直接跳转到主页
登陆状态下,也可以输入 /login 路由跳转到登录页
现在,我们想完成这样的功能:
非登陆状态下,无法直接跳转到主页,如果在非登陆状态下进行主页跳转,需要重定向至登陆路由
登陆状态下,无法跳转至登录页,如果在登陆状态下进行登陆页跳转,需要重定向至主页路由
要完成这个功能,有两种方案:
在每个组件中,根据 props 上的 history 对象来进行跳转
进行全局的路由守卫处理

首先在跟目录src下创建一个routerMap.js文件,代码如下:
将 auth 设置为 true,表示该路由需要权限校验。

/** * 定义路由组件,将 auth 设置为 true,表示该路由需要权限校验 */

import Admin from "./pages/Admin";
import Login from "./pages/Login";
import Error from "./pages/Error";

export const routerMap = [
    { 
   path: "/", name: "admin", component: Admin, auth: true},
    { 
   path: "/login", name: "Login", component: Login},
    { 
   path: "/error", name: "error", component: Error},
];

所有的路由跳转,都交给 FrontendAuth 高阶组件代理完成。下面是 FrontendAuth.js 组件的实现:

/** * 路由守卫校验 */
import React, { 
Component} from "react";
import { 
Route, Redirect} from "react-router-dom";
class FrontendAuth extends Component { 

// eslint-disable-next-line no-useless-constructor
constructor(props) { 

super(props);
}
render() { 

const { 
routerConfig, location} = this.props;
const { 
pathname} = location;
const isLogin = localStorage.getItem("user");
console.log(pathname, isLogin);
console.log(location);
// 如果该路由不用进行权限校验,登录状态下登陆页除外
// 因为登陆后,无法跳转到登陆页
// 这部分代码,是为了在非登陆状态下,访问不需要权限校验的路由
const targetRouterConfig = routerConfig.find(
(item) => item.path === pathname
);
console.log(targetRouterConfig);
if (targetRouterConfig && !targetRouterConfig.auth && !isLogin) { 

const { 
component} = targetRouterConfig;
return <Route exact path={ 
pathname} component={ 
component}/>;
}
if (isLogin) { 

// 如果是登陆状态,想要跳转到登陆,重定向到主页
if (pathname === "/login") { 

return <Redirect to="/"/>;
} else { 

// 如果路由合法,就跳转到相应的路由
if (targetRouterConfig) { 

return (
<Route path={ 
pathname} component={ 
targetRouterConfig.component}/>
);
} else { 

// 如果路由不合法,重定向到 404 页面
return <Redirect to="/error"/>;
}
}
} else { 

// 非登陆状态下,当路由合法时且需要权限校验时,跳转到登陆页面,要求登陆
if (targetRouterConfig && targetRouterConfig.auth) { 

return <Redirect to="/login"/>;
} else { 

// 非登陆状态下,路由不合法时,重定向至 404
return <Redirect to="/error"/>;
}
}
}
}
export default FrontendAuth;

然后,定义 Router 组件,在App.js中,该组件是经过高阶组件包装后的结果:

import './App.less';
import React, { 
Fragment} from "react";
import { 
Switch} from 'react-router-dom'
import FrontendAuth from "./FrontendAuth";
import { 
routerMap} from "./routerMap";
function App() { 

return (
<Fragment>
{ 
/*只匹配一个,匹配成功就不往下匹配,效率高*/}
<Switch>
<FrontendAuth routerConfig={ 
routerMap}/>
</Switch>
</Fragment>
);
}
export default App;

测试

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/142935.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • mac navicat 激活码(注册激活)

    (mac navicat 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/ide…

  • 什么是跨域跨域解决方法_500错误原因解决方法

    什么是跨域跨域解决方法_500错误原因解决方法一、为什么会出现跨域问题出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协…

  • 网站性能常用指标与优化方法有哪些_常见的web性能优化方法

    网站性能常用指标与优化方法有哪些_常见的web性能优化方法一、怎么看网站性能好不好?在做网站性能测试之前,我们先要了解网站性能影响因素,究竟是什么拖延了网站访问速度?通常来说主要有以下几种:1、网络带宽;简单来说,就是网速好不好,网站接入网络提供的带宽。如果用户数量大,那么造成网站拥挤,就很容易出现打不开的情况。2、服务器性能;服务器的性能,比如CPU、内存等。3、网站设计;还有个因素就是网页文件的大小,比如说图片太大,那么加载速度肯定就会变慢。4、DNS解析时间;二、网站性能测试指标主要有哪些?在日常的测试工作中,评估网站性能好不好的

  • 斑马网络首次公布整车个性化开放平台 开放姿态助力车企加速换道

    斑马网络首次公布整车个性化开放平台 开放姿态助力车企加速换道

  • Swing程序设计(简易文本编辑器数据结构课设)

    Java课程设计-基于Swing的文本编辑器1.介绍2.相关技术3.项目地址4.所需环境5.安装教程6.运行截图7.相关博客1.介绍设计一个类似于Windows记事本(Notepad)的Java程序。可以打开、新建、保存一个文本文件;对选中的文本进行各种编辑操作(设置字体、字号、字型、对齐方式、背景、前景色、复制、粘贴、剪切等);在文本中能够插入对象。2.相关技术Java的Swing编程Java的文件读写3.项目地址https://gitee.com/jack0240/text-edi

  • VS中时间控件的使用[通俗易懂]

    VS中时间控件的使用[通俗易懂]使用方法:1.下载时间控件 My97DatePickerBeta.2.在VS中新建项目,添加web窗体。3.将下载好的文件导入你的项目文件中,然后添加如下代码: &lt;scriptsrc="Content/My97DatePickerBeta/WdatePicker.js"type="text/javascript"&gt;&lt;/script&gt;//引号内为Wdat…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号