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)


相关推荐

  • 知识图谱—知识推理综述(一)[通俗易懂]

    知识图谱—知识推理综述(一)[通俗易懂]知识图谱—知识推理综述(一)1知识推理的概念以及分类1.1知识推理的基本概念所谓的知识推理,就是在已有知识的基础之上,推断出未知的知识的过程。通过从已知的知识出发,通过已经获取的知识,从中获取到所蕴含的新的事实,或者从大量的已有的知识中进行归纳,从个体知识推广到一般性的知识。根据上面的概念的描述,我们可以知道,对于知识推理而言,其包括的内容可以分为两种,第一种是我们已经知道的,用于进行推理的已有知识,另外一种是我们运用现有的知识推导或者归纳出来的新的知识。对于知识而言,其形式是多种多样的,可以是

  • c语言必背100代码,初学者代码大全(c语言必背100代码)[通俗易懂]

    c语言必背100代码,初学者代码大全(c语言必背100代码)[通俗易懂]一个完全入门初学者如何学代码,读代码和写代码,,我想学代码不知道方向谁能给我指明一个方向?1、学代码:前提是你的复有一个比较系统的学习.认真完成每一个课程中的案例.2、读代码:分制两步走:前期能读懂自己写的代码.2113后期能读懂他人写的代码和大致的知道底层的某些源码的含义.多去5261看开发文档(开发文档建议使用官方提供的4102英文版、不要使用中文自己害自己)3、写代码1653:前提是你要有…

  • Json交互处理_stata交互项检验

    Json交互处理_stata交互项检验Json交互处理JSON简介JSON(JavaScriptObjectNotation,JS对象标记)是一种轻量级的数据交换格式,目前使用特别广泛。采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。在JavaScript语言中,一切都是对象。因此,任何JavaScript支持的类型都可以通过JSON来表示,例如字符串、数字、对象、数组等。看看他

    2022年10月15日
  • java转大数据方向学习路线

    java转大数据方向学习路线申明:本文旨在为普通程序员(Java程序员最佳)提供一个入门级别的大数据技术学习路径,不适用于大数据工程师的进阶学习,也不适用于零编程基础的同学。目录前言一、背景介绍二、大数据介绍正文一、大数据相关工作介绍二、大数据工程师的技能要求必须掌握的技能11条高阶技能6条三、大数据学习规划第一阶段(基础阶段)第二阶段(攻坚阶段)第三阶段(辅助工具工学…

  • 精通Dubbo——Dubbo支持的协议的详解[通俗易懂]

    精通Dubbo——Dubbo支持的协议的详解[通俗易懂]Dubbo支持dubbo、rmi、hessian、http、webservice、thrift、redis等多种协议,但是Dubbo官网是推荐我们使用Dubbo协议的。下面我们就针对Dubbo的每种协议详解讲解,以便我们在实际应用中能够正确取舍。dubbo协议缺省协议,使用基于mina1.1.7+hessian3.2.1的tbremoting交互。连接个数:单连接连接方式:长连接传输协议

  • 模逆矩阵「建议收藏」

    模逆矩阵「建议收藏」整数a对同余n之乘法模逆元是指满足以下公式的整数b乘法模逆元又称为数论倒数,其实可以看作是普通倒数在模算术中的推广。同理,乘法模逆矩阵可以看作是普通逆矩阵在模算术中的推广。例如求如下矩阵K的模26的乘法逆此时,求逆矩阵的如下公式依然有效,不过,里面的符号含义要推广到模算术中:这里,ad-bc=3×5-2×3=9,的含义不再是普通的倒数,而是数论倒数所以…

发表回复

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

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