React路由-受保护的页面

在一些应用中，通常有一些页面，需要用户授权(登录)后进行访问，在Vue-router中有对应的钩子beforeEach来实现这样的功能，React-router中并没有具体的实现方式，因此，必须要自己实现。

目录结构

App.js用于实现具体的路由，dealLogin.js用来更改登录的状态，Home.js是首页，Login.js是登录页，Personal.js是个人中心页，protectRoute.js用来处理受保护的路由，比如,本文中的Personal.js组件

App.js

import { BrowserRouter as Router,Link,Switch,Route } from 'react-router-dom';
import Login from './Login'
import Home from './Home'
import Personal from './Personal';
import ProtectRoute from './protectRoute'
function App() {
  return (
    <Router>
      <ul>
      <li>
            <Link to='/' >
              首页
            </Link>
        </li>
        <li>
            <Link to='/login' >
              登录页
            </Link>
        </li>
        <li>
            <Link to='/personal' >
              个人中心页
            </Link>
        </li>
        
      </ul>
      <Switch>
        
        <Route path='/login' component={Login}></Route>
        <ProtectRoute path='/personal' component={Personal}></ProtectRoute>
        <Route path='/' component={Home}></Route>
      </Switch>
    </Router>
    
    
  );
}

export default App;

App.js中定义了路由的相关信息，其中ProtectRoute.js是一个组件，用来判断用户是否授权

ProtectRoute.js

import React from 'react'
import { Route,Redirect } from 'react-router-dom'
import dealLogin from './dealLogin'
export default function protectRoute({component:Component,render,...rest}) {
    
  return (
    <Route {...rest} render={
        values=>{
            if(dealLogin.isLogin){
                return <Component/>
            }else {
                return <Redirect to={{pathname:'/login',state:values.location.pathname}}/>
            }
        }
    }>

    </Route>
  )
}

Login.js

import React from 'react'
import dealLogin from './dealLogin'
export default function Login(props) {
    console.log('props------',props)
  return (
    <div>
        <h1>登录页</h1>
        <button onClick={
            ()=>{
                dealLogin.login();
                if(props.location.state){
                    props.history.push(props.location.state)
                }else{
                    props.history.push('/')
                }
                
            }  
        }>跳转</button>
    </div>

  )
}

dealLogin.js

export default {
    isLogin:false,
    login(){
        this.isLogin = true
    },
    loginOut(){
        this.isLogin = false

    }
}