React中封装一个高阶组件用于路由鉴权

朱雀 2023-10-06 23:52 45阅读 0赞

React中并没有像vue中的路由导航守卫，所以需要自己编写一个路由鉴权的高阶组件实现类似的功能：有token，就可以访问首页，没有token，就跳转到登陆页

高阶组件：一个组件被当作参数传入另一个组件内部使用，也就是children

![ee47dce9f8414a818bb64ce1d14e371c.png][]

import { getToken } from '../utils/localStore'
    import { Navigate } from 'react-router-dom'
    
    function AuthComponent(params) {
      const children = params.children
      const token = getToken()
      if (token) {
        return <>{children}</>
      } else {
        return <Navigate to="/login" replace></Navigate>
      }
    }
    
    export default AuthComponent

在需要使用的地方：通过配合Route实现组件的渲染

![5577d15438ad4b94b985ab585836456c.png][]

有token就可以直接访问主页，没有的话，就跳转到登陆页

![4f393e41a3144297bc190a27f28f1412.png][]

[ee47dce9f8414a818bb64ce1d14e371c.png]: https://img-blog.csdnimg.cn/ee47dce9f8414a818bb64ce1d14e371c.png
[5577d15438ad4b94b985ab585836456c.png]: https://img-blog.csdnimg.cn/5577d15438ad4b94b985ab585836456c.png
[4f393e41a3144297bc190a27f28f1412.png]: https://img-blog.csdnimg.cn/4f393e41a3144297bc190a27f28f1412.png

发表评论取消回复

表情：

评论列表（有 0 条评论，45人围观）

还没有评论，来说两句吧...

相关阅读

相关 React中封装一个高阶组件用于路由鉴权

React中并没有像vue中的路由导航守卫，所以需要自己编写一个路由鉴权的高阶组件实现类似的功能：有token，就可以访问首页，没有token，就跳转到登陆页高阶组件：一个

朱雀/ 2023年10月06日 23:52/ 0 赞/ 46 阅读

相关 React-高阶组件

高阶组件是 React 中复用组件逻辑的一种技巧，高阶组件是一个函数，接收需要包装的组件，返回值为增强后的组件。实现思路：高阶组件内部创建一个类组件，在这个类组件中去提

骑猪看日落/ 2023年07月06日 11:37/ 0 赞/ 84 阅读

相关 react路由鉴权 / 路由守卫

react路由鉴权 / 路由守卫首先路由鉴权就是在访问一个页面时判断是否需要权限，比如电商App结算账单的时候需要登录用户的账号路由守卫就是在该页面需要登录用户的情

Love The Way You Lie/ 2023年06月22日 10:34/ 0 赞/ 69 阅读

相关 vue项目路由权鉴（单个路由）

beforeEnter(to,from,next){ if(sessionStorage.getItem("token")){

妖狐艹你老母/ 2023年01月07日 14:25/ 0 赞/ 195 阅读

相关 React高阶组件

高阶组件（HOC）是React里的高级技术为了应对重用组件的逻辑，HOC本质上不是React API的一部分。他是从React的组合性质中显露出来的模式具体来说，一个高阶

Dear 丶/ 2022年10月13日 12:33/ 0 赞/ 272 阅读

相关 react 高阶组件

高阶函数基本概念 1.函数可以作为参数被传递 setTimeout(()=>{ console.log(0) },1000) 2.函数可

缺乏、安全感/ 2022年03月26日 12:22/ 0 赞/ 317 阅读

相关 React之高阶组件

React之高阶组件注意：本章节运行环境在[React项目构建][React]章节之上。文章目录 React之高阶组件高阶组件

迈不过友情╰/ 2021年12月10日 11:45/ 0 赞/ 457 阅读

相关 React 高阶组件

定义高阶组件（High Order Component, HOC）输入：React 组件 => 输出：React 组件使用场景高阶组件的作用主要是用来加强

雨点打透心脏的1/2处/ 2021年09月18日 10:02/ 0 赞/ 556 阅读

相关 react 在非路由组件中使用路由组件的api

如使用:this.props.history、this.props.location、this.props.match等 1、引入 impo

曾经终败给现在/ 2021年07月24日 17:26/ 0 赞/ 459 阅读

相关 react 高阶组件

高阶组件必须是一个函数,且必须返回一个组件，参数也必须接收一个组件作用:能对传入的组件进行一些限定操作,可以使用生命周期等 ![在这里插入图片描述

你的名字/ 2021年07月24日 17:11/ 0 赞/ 547 阅读