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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • cefsharp文档在哪_hdfs创建目录

    cefsharp文档在哪_hdfs创建目录参考:https://github.com/cefsharp/CefSharp/issues/601https://gist.github.com/BlackBooth/19ce027c4f68c1eb4fc1144988ca6662关键点:(1)设置CefSettings的BrowserSubprocessPath属性为对应的CefSharp.BrowserSubprocess.exe的…

    2022年9月18日
    4
  • chmod a+x和chmod u+x区别

    chmod a+x和chmod u+x区别原文链接:https://www.cnblogs.com/tonyauto/p/8085551.htmlchmoda+xa.txt等价于chmod+xa.txt给所有用户给予a.txt文件可执行权限chmodu+xa.txta.txt文件的所有用户可执行权限chmodg+xa.txta.txt用户组可执行权限chmodo+xa.txta.txt其他用户可执行…

    2022年7月12日
    23
  • android读取短信_android发短信代码

    android读取短信_android发短信代码在Tasker中利用短信的通知实现短信内容转发到微信之前的教程是利用Tasker自带的短信变量来实现的,这有一个无法解决问题:在360,魅族,坚果等品牌的手机中无法获取短信的消息内容。利用短信的通知则可以获取短信的内容,并且对于华为手机来说也可以不用关闭短信验证码保护功能,所以相较于原来的方法更简单,方便。应用通知的变量是一个本地数组变量%evtprm(),这个变量数组包含%evtprm…

    2022年10月13日
    2
  • Android应用程序绑定服务(bindService)的过程源代码分析

    Android应用程序绑定服务(bindService)的过程源代码分析Android应用程序组件Service与Activity一样,既可以在新的进程中启动,也可以在应用程序进程内部启动;前面我们已经分析了在新的进程中启动Service的过程,本文将要介绍在应用程序内部绑定Service的过程,这是一种在应用程序进程内部启动Service的方法。     在前面一篇文章Android进程间通信(IPC)机制Binder简要介绍和学习计划中,我们就曾经提到,在A

    2022年9月18日
    3
  • 2021年最新PHP 面试、笔试题汇总(一)[通俗易懂]

    2021年最新PHP 面试、笔试题汇总(一)

    2022年2月18日
    53
  • 【python】秀人集-写真集-爬虫-1.0「建议收藏」

    【python】秀人集-写真集-爬虫-1.0「建议收藏」秀人集写真爬取

    2022年7月13日
    73

发表回复

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

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