我的编程空间,编程开发者的网络收藏夹
学习永远不晚

react路由守卫的实现(路由拦截)

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

react路由守卫的实现(路由拦截)

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 对象来进行跳转
进行全局的路由守卫处理

首先在跟目录class="lazy" data-src下创建一个routerMap.js文件,代码如下:
将 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;

测试

到此这篇关于react路由守卫的实现(路由拦截)的文章就介绍到这了,更多相关react路由守卫内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

react路由守卫的实现(路由拦截)

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Vue路由守卫的实现原理及最佳实践

Vue路由守卫详解Vue路由守卫用于执行导航任务,如权限检查、数据预取和滚动操作。它们通过在路由配置中定义或使用全局守卫实现。最佳实践:避免耗时操作优先使用导航守卫明确拒绝导航使用next()进行重定向考虑异步守卫使用TypeScript类型检查其他注意事项:导航守卫按顺序执行异常将终止导航全局守卫适用于所有导航v-if和v-show可用于条件渲染
Vue路由守卫的实现原理及最佳实践
2024-04-02

React路由拦截模式及withRouter示例详解

这篇文章主要为大家介绍了React路由拦截模式及withRouter示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2022-11-13

vue3中的路由守卫怎么使用

这篇文章主要介绍“vue3中的路由守卫怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue3中的路由守卫怎么使用”文章能帮助大家解决问题。路由守卫有哪几种?路由守卫(导航守卫)分为三种:全局
2023-07-06

Angular中路由守卫的使用示例

这篇文章主要介绍了Angular中路由守卫的使用示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、路由守卫当用户满足一定条件才被允许进入或者离开一个路由。路由守卫场景:只
2023-06-06

angular9中路由守卫的使用方法

小编给大家分享一下angular9中路由守卫的使用方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!路由守卫是什么任何用户都能在任何时候导航到任何地方。但有时候出
2023-06-14

React Router V5怎么使用HOC组件实现路由拦截功能

本篇内容主要讲解“React Router V5怎么使用HOC组件实现路由拦截功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React Router V5怎么使用HOC组件实现路由拦截功能”
2023-07-05

Vue路由导航守卫的示例分析

这篇文章将为大家详细讲解有关Vue路由导航守卫的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。概念:“导航”表示路由正在发生变化vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫
2023-06-22

详解Vue中的路由与多种守卫

路由守卫又称导航守卫,指是路由跳转前、中、后过程中的一些钩子函数,这篇文章主要介绍了Vue中的路由与多种守卫,需要的朋友可以参考下
2023-02-02

ReactRouterV5:使用HOC组件实现路由拦截功能

这篇文章主要介绍了ReactRouterV5:使用HOC组件实现路由拦截功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-03-14

使用vue-router钩子函数怎么实现路由守卫

这篇文章给大家介绍使用vue-router钩子函数怎么实现路由守卫,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。全局钩子函数beforeEach:beforeEach一共接收三个参数,分别是to、from、next;t
2023-06-14

编程热搜

目录