react 路由权限守卫[通俗易懂]

react 路由权限守卫[通俗易懂]app.js//路由import{HashRouterasRouter,Route,NavLink,Redirect,Switch,useHistory}from’react-router-dom’//导入哈希路由(BrowserRouter浏览器路由)起别名叫Router//Route路由页面,NavLink路由导航页面importReact,{Component}from’react’;import”./App.css”;classApp.

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

在这里插入图片描述

app.js

// 路由
import { 
HashRouter as Router,Route,NavLink,Redirect,Switch,useHistory} from 'react-router-dom'
// 导入哈希路由(BrowserRouter浏览器路由)起别名叫Router
// Route 路由页面,NavLink 路由导航页面
import React, { 
 Component } from 'react'; 
import "./App.css";
class App extends Component { 
 
render() { 

return (
<Router>
<p> 
<NavLink to="/" exact>首页</NavLink>  | 
<NavLink to="/about">关于</NavLink>  | 
<NavLink to="/product/abc">产品abc</NavLink>   | 
<NavLink to="/product/123">产品123</NavLink>   | 
<NavLink to="/admin">管理</NavLink>   | 
<NavLink to="/private">私密</NavLink>   | 
<NavLink to="/login">登录</NavLink>   | 
</p>
<Switch>
<Route path="/" exact component={ 
Home}></Route>
{ 
/* <Route path="/about" component={About}></Route> */}
<Route path="/product/:id"  component={ 
Product}></Route>
<Route path="/admin"  component={ 
Admin}></Route>     
<Route path="/login"  component={ 
Login}></Route> 
<PrivatePage path="/private">
<Private></Private>
</PrivatePage>
<PrivatePage path="/about">
<About></About>
</PrivatePage>
<Route   component={ 
NoMatch}></Route>
</Switch>
</Router>
);
}
}
export default App;
// 权限处理
// Private 登录后 可以进入,没有登录跳转到 login 登录页面
// Login 登录页面
// PrivatePage 页面(需要权限页面都包裹再里面)
// fakeAuth登录状态记录 isAuth 是否登录 | authentic 授权登录方法 signout 注销方法
const fakeAuth = { 

isAuth:false, //默认非登录状态
authentic(cb){ 

this.isAuth = true;//登录状态
setTimeout(cb,200);//cb登录成功后要做的callback回调函数
},
signout(cb){ 

this.isAuth = false;//非登录状态
setTimeout(cb,300);//cb注销成功后要做的callback回调函数
}
}
// 所有需要权限页面都放入内部 render 属性
function PrivatePage({ 
children}){ 

return <Route render={ 
({ 
location,...rest})=>{ 

let component = React.cloneElement(children,rest);
// chilren 基础了 父组件的所有属性 history,match,赋值给component
// return fakeAuth.isAuth?component:<Redirect to={ 
{pathname:"/login",state:{from:location}}}/>
return fakeAuth.isAuth?children:<Redirect to={ 
{ 
pathname:"/login",state:{ 
from:location}}}/>
}}/>
// 通过state 传递当前location
}
function Private(props){ 

let history = useHistory();//通过hooks方式拿到history
// let history = props.history;
return(<div>
<h1>私密页面</h1>
<button onClick={ 
()=>{ 

fakeAuth.signout(()=>{ 
history.replace("/");
// 注销完毕跳转到首页
})
}}>注销</button>
</div>)
}
function Login(props){ 

let { 
from} = props.location.state||{ 
from:{ 
pathname:"/"}};
// 通过props接收传递过来state也就是上一个页面的location ||默认首页
return (<div>
<h1>登录页面</h1>
<button onClick={ 
()=>{ 

fakeAuth.authentic(()=>{ 

props.history.replace(from)
})
}}>登录</button>
</div>)
}
function NoMatch({ 
location}){ 

// console.log(location,"location")
// location当前页面地址栏解析 pathname 地址 query查询 hash哈希值
return (<div>
您的页面被外星人绑架了 <br/>
找不页面: { 
location.pathname}<br/>
<NavLink to="/" exact>回首页</NavLink>
</div>)
}
function Admin({ 
match,location}){ 

return(
<div className="admin" >
<div className="leftNav" >
<NavLink to={ 
match.url+"/user"}>用户管理</NavLink><br/>
<NavLink to={ 
match.url+"/order"}>订单管理</NavLink>
</div>
<div className="content">
<Route path={ 
match.url+"/user"} component={ 
User}></Route>
<Route path={ 
match.url+"/order"} component={ 
Order}></Route>
{ 
match.url==='/admin'?<Redirect   from={ 
match.url} to={ 
match.url+"/order"} ></Redirect>:""}
</div>
</div>)
}
function User({ 
match,location,history}){ 

console.log("user",match,location,history)
return (<div>
用户管理页面
</div>)
}
function Order({ 
history}){ 

return (<div>
<button onClick={ 
()=>history.goBack()}>返回</button> |
<button onClick={ 
()=>history.push("/")}>首页</button>
<button onClick={ 
()=>history.replace("/")}>首页-repalce</button>
<button onClick={ 
()=>history.push({ 
pathname:"/about",search:"?name=mumu&age=18",hash:"#good",state:{ 
big:"super"}})}>about</button>
订单管理页面
</div>)
}
function Product({ 
match}){ 

// console.log(match) //匹配的路由项 params 参数 url匹配的地址
return (<div>产品页面{ 
match.params.id}</div>)
}
function Home(){ 

return (<div>首页页面</div>)
}
function About({ 
location}){ 

console.log("about",location)
return (<div>关于我们页面</div>)
}

app.css

.App { 

text-align: center;
}
.App-logo { 

height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) { 

.App-logo { 

animation: App-logo-spin infinite 20s linear;
}
}
.App-header { 

background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link { 

color: #61dafb;
}
@keyframes App-logo-spin { 

from { 

transform: rotate(0deg);
}
to { 

transform: rotate(360deg);
}
}
.admin{ 

display:flex;
height: 80vh;
margin: 10px;
}
.leftNav{ 

width:200px;
border-right: 1px solid #61dafb;
}
.content{ 

flex: 1;
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/137815.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • resnet34 pytorch_pytorch参数初始化

    resnet34 pytorch_pytorch参数初始化pytorch是包含一些常见的神经网络模型的,ResNet34、ResNet18、VGG等等,都在models模块中,调用接口如下:model=models.resnet34(pretrained=True,progress=True)预训练pretrained和进度条progress设为True或False就看你自己需求咯~⚠️与此同时,你可能还会遇到pytorch官网的输出类别数与你所需不同:你想分七类,可resnet34官网是1000类,那就调整一下呗:#修改最后线性层的输出通道数

  • Android ViewPager使用具体解释

    Android ViewPager使用具体解释

    2021年11月30日
  • html超链接样式「建议收藏」

    html超链接样式「建议收藏」a:link,定义正常链接的样式;a:visited,定义已访问过链接的样式;a:hover,定义鼠标悬浮在链接上时的样式;a:active,定义鼠标点击链接时的样式。

  • 请不要拿ipad和手机、上网本相提并论「建议收藏」

    请不要拿ipad和手机、上网本相提并论「建议收藏」苹果公司最近推出了ipad,但网上的评论不是很好,我觉得,一个好的产品会改变人们对某些事物的认识,甚至是人们的生活习惯。网上有ipad的十大罪状,有些我不了解,但有我认为是无稽之谈。不支持多点触摸首先,多点触摸苹果公司在他们的产品中应用的比较多的,比如iphone和macair,当然这样的技术迁移到ipad上面肯定没有任何问题,但是,网上认为这样的技术在ipad的设计上被取消

  • 【Java】一篇文章带你了解String、StringBuffer和StringBuilder的区别

    【Java】一篇文章带你了解String、StringBuffer和StringBuilder的区别String:字符串常量StringBuffer:字符串变量(多线程情况下使用,保护线程安全)synchronized:保护线程安全的StringBuilder:字符串变量(单线程情况下使用)String、StringBuffer、StringBuilder的主要区别:1.String类的内容不可以修改,而StringBuffer和StringBuilder的内容可以修改;2.StringBuffer和StringBuilder的大部分功能都是相似的;3.StringBu..

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号