react路由权限设置

大家好，又见面了，我是你们的朋友全栈君。

说明

在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页面退出功能报错