react路由权限设置
2023-06-13 09:11:24 时间
大家好,又见面了,我是你们的朋友全栈君。
说明
在react项目中有时我们的一些页面需要权限才能访问,这里以需要登录才能访问进行的设置
在这里可以看到权限页面和关于页面是需要登录才能访问的
import React, {
Component,useState,useEffect ,useRef} from 'react';
import {
HashRouter as Router, Route, NavLink, Redirect, Switch ,useHistory} from "react-router-dom";
class APP extends Component {
render() {
return (
<div>
<Router>
<NavLink to="/">首页</NavLink> |
<NavLink to="/about">关于</NavLink> |
<NavLink to="/login">登录</NavLink> |
<NavLink to="/private">权限</NavLink> |
<br/>
<Switch>
<Route path="/" exact component={
Home}></Route>
//<Route path="/about" exact component={About}></Route>
<Route path="/login" exact component={
Login}></Route>
<PrivatePage path="/private">
<Private></Private>
</PrivatePage>
<PrivatePage path="/about">
<About></About>
</PrivatePage>
</Switch>
</Router>
</div>
);
}
}
export default APP;
// 权限处理
// Private 登录后 可以进入,没有登录跳转到 login 登录页面
// Login 登录页面
// PrivatePage 页面(需要权限页面都包裹再里面)
// fakeAuth登录状态记录 isAuth 是否登录 | authentic 授权登录方法 signout 注销方法
const fakeAuth={
isAuto:false, //默认非登录状态
authentic(cb){
this.isAuto=true; //登录状态
setTimeout(cb,200) //cb登录成功后要做的callback回调函数
},
signOut(cb){
this.isAuto=false; //非登录状态
setTimeout(cb,200) //cb注销成功后要做的callback回调函数
}
}
// 所有需要权限页面都放入内部
function PrivatePage({
children}){
return <Route render={
({
location})=>{
//此处应特别注意 要么使得children通过克隆完全继承,要不使用userhistory方法不然退出功能无法找到history方法
// let component = React.cloneElement(children,rest);
// chilren 基础了 父组件的所有属性 history,location,match,赋值给component
// return fakeAuth.isAuth?component:<Redirect to={
{pathname:"/login",state:{from:location}}}/>
return fakeAuth.isAuto?children:<Redirect to={
{
pathname:'/login',state:{
from:location}}}/> //将loacation赋值给from,传递过去
}}/>
}
function Home() {
return (
<div>
<h1>首页</h1>
</div>
)
}
function About() {
return (
<div>
<h1>关于</h1>
</div>
)
}
function Login(props){
let {
from}=props.location.state || {
from:{
pathName:'/'}}
// console.log(from,'上一个页面的loacation');
// 通过props接收传递过来state也就是上一个页面的location ||默认首页
return (
<div>
<h1>登录</h1>
<button onClick={
()=>{
fakeAuth.authentic(()=>{
props.history.replace(from)
})
}}>按钮</button>
</div>
)
}
function Private(){
let history=useHistory();//通过hooks方式拿到history
return (
<div>
<p>需要权限的页面</p>
<button onClick={
()=>{
fakeAuth.signOut(
history.replace('/login')
)
}}>退出</button>
</div>
)
}
踩坑的地方
要么使得children通过克隆完全继承,要不使用userhistory方法不然退出功能无法找到history方法 不然 Private页面退出功能报错
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/138831.html原文链接:https://javaforall.cn
相关文章
- VUE 路由入门
- 3分钟短文:Laravel路由加模型等于?
- 07-React Hooks(路由组件懒加载, Context上下文, 组件优化...)
- react 路由守卫
- react路由原理解析[通俗易懂]
- react路由配置
- AngularJS进阶(二)AngularJS路由问题解决
- 深入flask路由,你也能当架构师!
- react的jsx和React.createElement是什么关系?面试常问
- Express路由
- 网络中超好玩的路由环路(3)——两个标准的战争:OSPF计算环路
- 网络中超好玩的路由环路(4)——双点重分发环路A(收敛引发)
- React魔法堂:echarts-for-react源码略读
- 在线客服系统如何进行智能路由?
- react源码分析:深度理解React.Context_2023-02-28
- APP动态路由的设计与实践
- 个人笔记(路由、网络相关)
- Linux主机如何搭建路由器(linux主机加路由)
- Linux路由添加:快速上手(linux路由添加)
- Yii入门教程之目录结构、入口文件及路由设置
- CodeIgniter框架URL路由总结