react 路由守卫

react 路由守卫通过HOC的方式实现路由守卫

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

原理
react路由守卫 是通过 高阶组件(HOC) 实现的

因此针对不同的情况就要封装不同的 HOC

接下来展示一个有关登录权限的路由守卫例子

demo

import React from 'react'
import { 
    Route, Redirect } from 'react-router-dom'
import { 
    connect } from 'react-redux'
export default connect(({ 
    user }) => ({ 
    isLogin: user.isLogin }))(
	function PrivateRoute({ 
    isLogin, component: Component, ...rest }) { 
   
		return (
			<Route
				{ 
   ...rest}
				render={ 
   props =>
					isLogin ? (
						<Component { 
   ...props} />
					) : (
						<Redirect
							to={ 
   { 
   
								pathname: '/login',
								state: { 
    redirect: props.location.pathname },
							}}
						/>
					)
				}
			/>
		)
	}
)
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/144094.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 详解 MNIST 数据集

    MNIST数据集已经是一个被”嚼烂”了的数据集,很多教程都会对它”下手”,几乎成为一个“典范”.不过有些人可能对它还不是很了解,下面来介绍一下.MNIST数据集可在http://yann.lecun.com/exdb/mnist/获取,它包含了四个部分:Trainingsetimages:train-images-idx3-ubyte.gz(9.9MB,解压后47

    2022年4月6日
    283
  • vscode常用的插件_vscode必装插件

    vscode常用的插件_vscode必装插件1.Searchnode_modules用于搜索node_modules下的文件2.CodeMetricsComputescomplexityinTypeScript/JavaScriptfiles.Itlookslikethis3.CodeRunner右键runcode直接在vscode里运行当前文件的代码。支持多种语言。Runcodesnippet…

    2022年9月30日
    1
  • usb转485驱动

    usb转485驱动usb转485驱动是官方提供的一款USB驱动,本站收集提供高速下载,用于解决USB接口不能正常识别,无法正常使用的问题,本动适用于:WindowsXP/Windows7/Windows8/Windows1032/64位操作系统。有需要的朋友可以来本站下载安装。usb转485驱动http://www.equdong.net/qtrj/usbdrv/16155.html…

    2022年4月30日
    62
  • navicate 15 激活码【注册码】

    navicate 15 激活码【注册码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月18日
    57
  • CSDN博客导出工具 Mac By Swift

    CSDN博客导出工具 Mac By Swift

    2022年1月8日
    40
  • c语言—数组详解(建议收藏)

    c语言—数组详解(建议收藏)文章目录一、一维数组1.一维数组的创建和初始化(1).数组的创建(2).数组的初始化2.一维数组的使用3.一维数组在内存中的存储二、二维数组1.二维数组的创建和初始化(1).二维数组的创建(2).二维数组的初始化2.二维数组的使用3.二维数组在内存中的存储三、数组作为函数参数1.一维数组2.二维数组四、数组指针和指针数组1.指针数组2.数组指针一、一维数组1.一维数组的创建和初始化(1).数组的创建数组是一组相同类型元素的集合。数组的创建方式:type_tarr_name[const

    2022年7月22日
    15

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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