react router 路由守卫_React-router 路由守卫
什么叫路由守卫
路由在跳转之前做一些验证,比如只有登录之后才能进入用户界面。
技术要点
react-router react-redux react-thunk(react-saga)
实现功能
模仿登录,只有用户输入123,点击登录之后才能进入user.js界面
实现思路
实现的思路只要是通过高阶组件(hoc)把user封装一下,在封装的组件中,拿到isLogin是否是true,如果是true的话重定向到user组件,如果是false,则显示登录界面
创建user.js文件(基本组件)和login.js登录界面
const User = () =>{
return (
)
}
export default User
2.创建高阶组件Provide .js
import { Redirect, Route } from "react-router"
import { useSelector } from "react-redux"
function PrivateRoute (props) {
const {component:Component,...rest} =props
const data = useSelector(state=>state.user) //这个地方也可以使用connect获取值
const {isLogin} = data
return (
{...rest}
render={props =>
isLogin ? (
) : (
to={{pathname: "/login", state: {from: props.location.pathname}}}
/>
)
}
/>
)
}
export default PrivateRoute
创建路由文件
import user from './smallPage/user'
import Login from './smallPage/login'
import Provide from './PrivateRoute'
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
// import a from 'react'
const Index = () => {
return (
首页
two
third
)
}
export default Index
使用react-redux,创建index.js和reducer.js
index.js
import {applyMiddleware, createStore,combineReducers} from 'redux'
import thunk from "redux-thunk";
import {loginReducer} from './loginReducer'
import rootSaga from "../soga/rootSaga";
import createSagaMiddleware from "redux-saga";
const sagaMiddleware = createSagaMiddleware()
const store = createStore(combineReducers(
{user:loginReducer}),
// applyMiddleware(sagaMiddleware)
applyMiddleware(thunk)
)
// sagaMiddleware.run(rootSaga);
export default store
reducer.js
const userInit = {
isLogin: false,
userInfo: {id: null, name: "", score: 0},
loading: false,
err: {msg: ""}
};
// 定义用户基本信息修改规则
export const loginReducer = (state = {...userInit}, {type, payload}) => {
switch (type) {
case "REQUEST":
return {...state, loading: true};
case "LOGIN_SUCCESS":
return {...state, isLogin: true, loading: false, userInfo: {...payload}};
case "LOGIN_FAILURE":
return {...state, ...userInit, ...payload};
case "LOGOUT_SUCCESS":
return {...state, isLogin: false, loading: false};
default:
return state;
}
};
创建登录界面
import { useEffect, useState } from "react"
import { useHistory } from "react-router";
import {useSelector,useDispatch,connect} from 'react-redux'
import {login} from '../../action/index'
const Login = (props) => {
console.log("props:",props);
const {isLogin,loginResult} = props
let history = useHistory()
if (isLogin){
history.replace(props.location.state.from)
}
const [state, setState] = useState("")
const changeValue = e => {
setState(e.target.value)
}
return (
changeValue(e)} />
loginResult({name:state}) }>登录
)
}
export default connect(({user}) =>({isLogin:user.isLogin}),{loginResult:login})(Login)
//react-redux 映射到组件里面,获取redux的值和方法
在service、login.js文件的写入登录函数
const LoginService = {
login(userInfo) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (userInfo.name === "123") {
resolve({id: 123, name: "omg原来是小明"});
} else {
reject({err: {msg: "用户名或密码错误"}});
}
}, 1000);
});
},
// 获取更多信息
getMoreUserInfo(userInfo) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (userInfo.id === 123) {
resolve({...userInfo, score: "100"});
} else {
reject({msg: "获取详细信息错误"});
}
}, 1000);
});
}
};
export default LoginService;
创建action/index.js文件调用登录函数,主要是给login.js文件提供方登录方法
export const LoginUserClick = user =>dispatch=>{
LoginService.login(user).then(res=>{
getMoreUserInfo(dispatch,res)
},err=>{
})
}
export const getMoreUserInfo = (dispatch, userInfo) => {
LoginService.getMoreUserInfo(userInfo).then(
res => {
dispatch({type: "LOGIN_SUCCESS", payload: res});
},
err => {
dispatch({type: "LOGIN_FAILURE", payload: err});
}
);
};
路由守卫就完成了...........
react router 路由守卫_React-router 路由守卫相关推荐
- reactrouter4路由钩子_react router @4 和 vue路由 详解(八)vue路由守卫
13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据from和to来判断是哪个路由触发) const router = new VueRouter({ ... }) ...
- react router 路由守卫_react实现hash路由
众所周知,目前单页面使用的路由有两种实现方式: hash 模式 history 模式 hash 模式 路由原理: 我们先来看hash模式,页面首次加载时需要在load事件中解析初始的URL,从而展示进 ...
- Vue(小码哥王洪元)笔记06路由,url的hash,history,router-linke,路由跳转,动态路由,懒加载,路由嵌套,router参数传递,导航守卫
1.什么是路由 路由器提供了两种机制:路由和传送 路由:数据报从来源到目的地的路径 传输:将输入端的数据转移到合适的输出端 路由有一个非常重要的概念教路由表 路由表本质上就是一个映射表,决定了数据包的 ...
- 当使用this.$router.back()或者this.$router.go(-1)返回上一页时,搭配组件内路由守卫,屏幕闪烁和跳转页面错误问题
当使用this.$router.back()或者this.$router.go(-1)返回上一页时,搭配组件内路由守卫,屏幕闪烁和跳转页面错误问题 问题描述:项目有这个需求,当页面的输入框内容填完之后 ...
- Vue Router系列之详解路由守卫
文章の目录 1.路由守卫是什么 2.导航守卫分类 2.1.全局守卫 2.1.1.全局前置守卫beforeEach 2.1.2.全局解析守卫beforeResolve(2.5.0 新增) 2.1.3.全 ...
- hitchhiker部署_《 Hitchhiker的React Router v4指南》:路由配置的隐藏值
hitchhiker部署 Welcome to the Hitchhiker's Guide to React Router v4, Part IV! 欢迎来到< React Router v4 ...
- vue-router进阶:路由使用归纳、路由导航守卫、导航守卫解析流程、
一.定义和理解 导航守卫的作用:vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航. >>项目中应用场景举例:路由页面跳转时候进行登陆验证:路由跳转判断: 有多种机会 ...
- 路由守卫 AJAX,vue路由导航守卫 和 请求拦截以及基于node的token认证
#####什么时候需要登录验证与权限控制 1.业务系统通常需要登录才能访问受限资源,在用户未登录情况下访问受限资源需要重定向到登录页面: 2.多个业务系统之间要实现单点登录,即在一个系统或应用已登录的 ...
- 创建vue项目(四)路由相关知识、路由守卫、插槽、打包小细节
一.路由相关点 1. 路由跳转传参以及接参 https://segmentfault.com/a/1190000012393587 方法一: (1) 参数配置: { path : 'xx/:参数变量' ...
- vue2路由手动创建二级路由路由传参路由守卫打包上线
路由手动配置: #在@vue/cli创建的项目中,路由用法如下. 1.安装路由npm install vue-router@32:定义路由所需的组件(.vue文件)要实现页面about 和home两个 ...
最新文章
- MOSFET驱动器汇总 : 单个N-CHANNEL,半桥,全桥,3项桥
- 字符集编码ANSI和UNICODE
- 状态同步与帧同步的简介
- matplotlib xticks 基于 旋转_咬文嚼字——对matplotlib的文字绘图总结
- python 实现感知器(一)
- Java连载3-编译与运行阶段详解JRE,JDK,JVM关系
- HDU2007 平方和与立方和【序列处理+入门】
- 64位浮点数_浮点数误差
- SonicWall宣布推出全新渠道伙伴计划,为中小型企业的网络安全提供可靠防护
- 真正的焦虑感来自对比
- hdu1048(c++)
- QT创建和使用动态链接库
- java 类型通配符_通配符类型
- 诛仙3饮马江南服务器信息,12月29日全服停机更新维护公告
- 初中高中睡前必看古诗名句
- 计算机表格折线图添加图例,怎么用EXCEL表格数据做折线图-如何用excel做折线图添加系列...
- jquery 立体走马灯_jquery实现跑马灯效果(一)
- 边缘计算和云计算之间,主要有什么优势?
- C/C++ 延时函数 (标准库)
- zemax评价函数编辑器_zemax默认评价函数使用方法
热门文章
- vue组件中传值遇到的一些问题
- git学习笔记-(7-高层命令(1))
- alias 为命令定义别名、unalias删除别名
- oracle游标作为out参数,oracle 存储过程 带游标作为OUT参数输出
- mysql使用变量填值为数组_MySQL如何有效的存储IP地址?
- python eoferror_Python3:EOFError: Ran out of input
- oracle安装5.1,5.1 Oracle RAC的安装(5)
- MybatisPlus代码生成器的使用
- StanfordDB class自学笔记 (13) Views and Authorization
- 大疆水弹机器人_现身央视的大疆机甲大师 S1 备受瞩目的教育机器人圆了儿时机甲梦...