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