前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react路由权限设置

react路由权限设置

作者头像
全栈程序员站长
发布2022-08-23 15:47:38
2.3K0
发布2022-08-23 15:47:38
举报

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

说明

在react项目中有时我们的一些页面需要权限才能访问,这里以需要登录才能访问进行的设置

在这里插入图片描述
在这里插入图片描述

在这里可以看到权限页面和关于页面是需要登录才能访问的

代码语言:javascript
复制
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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年5月6,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 说明
  • 踩坑的地方
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档