[web前端] react router4.0 登录后返回之前浏览页面(回到来源页)
本文链接:https://blog.csdn.net/zeroyulong/article/details/81911704
困扰了好久的问题,最终还是在官方文档上找到了答案(看英文文档真心难受啊~~)
官方文档地址:https://reacttraining.com/react-router/web/example/auth-workflow
1.来源页中跳转登录按钮:
将本页pathname存放到路由state中,
<Link to={{
pathname:"/login",
state:{from:this.props.location.pathname}
}} className="name-load">去登录</Link>
2.跳转到登录页面后,获取来源,登录完成后页面重定向至来源页面(判断是否有来源页面,若用户直接进入的是登录页面,则无法获取state,此时应提供一个默认首页供用户跳转)
//来源记录
let from;
if(this.props.location.state != null){
from = this.props.location.state.from
}
const urlTo = from ||'/App'; return (
<div>
{this.props.isAuth?<Redirect to={urlTo} />:null}
<p>你没有权限,需要登录才能看</p>
<button onClick={this.props.login}>点我登录</button>
</div>
)
[web前端] react router4.0 登录后返回之前浏览页面(回到来源页)的更多相关文章
- 在PHP中如何实现在做了么个操作后返回到指定页面
我们经常会碰到类似用户在没有登录的情况下进行提问.评论,需要用户登录后返回刚才浏览的网页,这种功能用cookie保存当前url地址来实现.我用的是jquery,读者需要懂点jquery中的ajax请求 ...
- php弹出式登录窗口并获得登录后返回值
一款bootstrap样式结合php制作的弹出式登录窗口,输入用户名和密码后,ajax传参给后台,并获得登录后返回值. hwLayer+ajax弹出登录框 $(function() { $('#for ...
- Web前端开发最佳实践(4):在页面中添加必要的meta信息
meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...
- Web前端初级问题—ajax登录跳转登录实现
当我们的用户进行系统登录时,用户名和密码的验证都是后端验证的.而且,用户登录状态也是要后端设置的,查询数据库后,用户名和密码正确,则在session中存储一个uuid,每个页面需要根据登录状态判断展示 ...
- thinkphp实现登录后返回原界面
主要思路还是用session记录原地址,在登录后再跳转回原界面 先保存请求login方法界面的url public function savelogin(){ session('returnUrl', ...
- WordPress用户登录后重定向到指定页面
这篇文章将向您展示WordPress用户登录后如何重定向到指定页面或者文章的技巧. 一.重定向到网站管理面板. 将以下代码添加到您的当前主题的 functions.php 文件中: function ...
- CAS3.5.2 Server登录后返回用户信息详细解决方案
单点登录(Single Sign-On, 简称SSO)是目前比较流行的服务于企业业务整合的解决方案之一,SSO使得在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.大家在使用时CA ...
- [Web 前端] React Router v4 入坑指南
cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...
- [Web 前端] React高级教程(es6)——(2)对于Refs最新变动的理解
cp : https://blog.csdn.net/liwusen/article/details/53384561 1.什么是ReactJS中的refs 在React中组件并不是真实的 DOM 节 ...
随机推荐
- Maven项目命名规范
Guide to naming conventions on groupId, artifactId and versiongroupId will identify your project uni ...
- 如何用 DHCP + DNS + Web 实现一个网络架构
为什么?为什么?为什么在浏览器里输入www.baidu.com就可以访问百度搜索,而输入pan.baidu.com就可以访问百度网盘,它是怎么实现的? 实验原理简介 在Internet中,计算机之间通 ...
- 从linux进程角度看JVM内存模型
普通进程栈区,在JVM一般仅仅用做线程栈,如下图所示 首先是永久代.永久代本质上是Java程序的代码区和数据区.Java程序中类(class),会被加载到整个区域的不同数据结构中去,包括常量池.域.方 ...
- 学会 Debug
如何成为优秀程序员第 2/100 期分享 01 调试(Debug)是成为一个程序员的基石. 调试这个词第一个含义即是移除错误,但真正有意义的含义是,通过检查来观察程序的运行.一个不会调试的程序员等同于 ...
- JAVA设计模式之工厂模式—Factory Pattern
1.工厂模式简介 工厂模式用于对象的创建,使得客户从具体的产品对象中被解耦. 2.工厂模式分类 这里以制造coffee的例子开始工厂模式设计之旅. 我们知道coffee只是一种泛举,在点购咖啡时需要指 ...
- 用python+openpyxl从表格中读取测试用例的多条数据,然后将执行结果写入表格中
# -*- coding: utf-8 -*- from selenium import webdriver from openpyxl import load_workbook class mylo ...
- Vuex 是什么?
Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件状态,并以相应的规则保证状态以一种可预测的方式发生变 什么是"状态管 ...
- 【python】Requests 库支持RESTFUL的几种方式
Get: 查看资源 POST: 增加资源 PUT:修改资源,更新全部资源 PATCH:修改资源,更新局部资源 DELETE: 删除资源 HEAD: 查看响应头 OPTIONS: 查看请求方式
- FTP服务FileZilla Server上传提示550 Permission denied
原文地址:https://help.aliyun.com/knowledge_detail/5989224.html 相关文章 1.filezilla通过root账户远程连接管理ubuntu serv ...
- 《vue》实现动态显示与隐藏底部导航方法!
在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显示与隐藏的两种方式: 其实很简单,我们在路由里面带上参数,这个参数就用来区分那个页面显示 ...