[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 节 ...
随机推荐
- JavaScript 解决 url 中的中文乱码问题
页面传值过程中,通过 url 传值,发现中文会乱码. 以下是解决方法: 1.传的页面: encodeURI(url + "?userName=" + userName); //en ...
- X509IncludeOption 枚举
X509IncludeOption 枚举 指定 X.509 数据应包括 X.509 证书链的哪些内容. EndCertOnly 2 X.509 链信息中仅包括最终证书. ExcludeRoot 1 包 ...
- 洛谷 P2725 邮票题解
题目背景 给一组 N 枚邮票的面值集合(如,{1 分,3 分})和一个上限 K —— 表示信封上能够贴 K 张邮票.计算从 1 到 M 的最大连续可贴出的邮资. 题目描述 例如,假设有 1 分和 3 ...
- Supermarket(贪心/并查集)
题目链接 原创的博客 题意: 超市里有N个商品. 第i个商品必须在保质期(第di天)之前卖掉, 若卖掉可让超市获得pi的利润. 每天只能卖一个商品. 现在你要让超市获得最大的利润. n , p[i], ...
- 编程小白入门分享一:git的最基本使用
git简介 引用了网上的一张图,这张图清晰表达git的架构.workspace是工作区,可以用编辑器直接编辑其中的文件:Index/Stage是暂存区,编辑后的文件可以添加到(add)暂存区:Repo ...
- 接口&调用接口
接口: /** * 分页查询 * @param request * @param pageable * @return */ @GetMapping("/query-baseProductB ...
- NPM——npm|cnpm如何升级
前言 手动更新了node.js版本后,想要升级下npm的版本 步骤 其实无论npm还是cnpm升级的命令都是一样的,除了需要指定包名. 升级npm $ npm install -g npm 查看npm ...
- django-使用类视图
视图函数views.py中 from django.shortcuts import render, redirect from django.http import HttpResponse, Js ...
- vue $emit、$on、$refs简介
1.$emit 触发当前实例上的事件.附加参数都会传给监听器回调 ex: 子组件调用父组件的方法并传递数据注意:子组件标签中的时间也不区分大小写要用“-”隔开 子组件: <template> ...
- LOJ P10011 愤怒的牛 题解
每日一题 day36 打卡 Analysis 非常水的二分模板,就直接二分答案,用贪心策略check就好了 #include<iostream> #include<cstdio> ...