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)


相关推荐

  • Lena图像原图及由来[通俗易懂]

    Lena图像原图及由来[通俗易懂]莱娜图在数字图像处理学习与研究中颇为知名,常被用作数字图像处理各种实验的例图。

  • Prophet快速安装方法

    Prophet快速安装方法安装VC++14,编译器https://download.csdn.net/download/amoscn/10399046安装Fbprophetcondainstallpystancondainstall-cconda-forgefbprophet安装绘图接口condainstallplotly

  • Flume-Kafka-Flume对接Kafka以及Kafka数据分类传输

    Flume-Kafka-Flume对接Kafka以及Kafka数据分类传输Flume对接KafkaFlume日志采集组件;Flume对接kafka主要是为了通过kafka的topic功能,动态的增加或者减少接收的节点,并且Flume要对接多个节点是需要多个channel和sink的会导致内存不够的情况。那么可以实现的场景就是Flume采集日志文件,通过kafka给多给业务线使用。1)配置flume(flume-kafka.conf)#definea1.sources=r1a1.sinks=k1a1.channels=c1#sourcea1

  • struts2 FilterDispatcher 和 StrutsPrepareAndExecuteFilter 的区别

    struts2 FilterDispatcher 和 StrutsPrepareAndExecuteFilter 的区别转自:http://blog.csdn.net/s_ongfei/article/details/5811070FilterDispatcher是struts2.0.x到2.1.2版本的核心过滤器.! StrutsPrepareAndExecuteFilter是自2.1.3开始就替代了FilterDispatcher的.! 这样的改革当然是有好处的.! 为什么这么说.?应该知道如果我们自…

  • vim学习六之搜索命令「建议收藏」

    vim学习六之搜索命令「建议收藏」目录Vim基本搜索命令/或者?搜索n/N正反向下一个特殊搜索Vim高亮搜索搜索大小写敏感搜索进阶Vim正则表达式搜索查找在行首的特定串查找在行尾的特定串匹配特定行Vim基本搜索命令/或者?搜索在Vim普通模式下,输入/或?符号就进入了搜索模式,/用于正向往下搜索,?用于反向往上搜索。n/N正反向下一个在搜索模式下可以对Vim打开的整个文本内容进行搜索,当按下n时可以继续正向查找下一个相匹配的目前单词。N的作用与n相反,是往上反向搜索目标单词。特殊搜索在Vim命

  • xshell为什么老会突然连接不上虚拟机_虚拟机配置xshell连接

    xshell为什么老会突然连接不上虚拟机_虚拟机配置xshell连接问题背景最近一段时间在研究docker的使用时,在VM中安装了CentOS7.6,配置了静态IP,使用Xshell连接虚拟机,发现响应的速度特别慢,大概得有10秒钟才能连上。具体描述使用Xshell连接配置好的主机,会在这个地方停留至少十秒钟。Xshell6(Build0111)Copyright(c)2002NetSarangComputer,Inc.Allrightsr…

发表回复

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

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