路由守衛

• 新建路由頁面RouterPage.js

import React, { Component } from 'react';
import {BrowserRouter, Link, Route, Switch} from 'react-router-dom';
import HomePage from './HomePage';
import UserPage from './UserPage';
import LoginPage from './LoginPage';
import SearchPage from './SearchPage';
import PrivateRoutePage from './PrivateRoutePage';

export default class RouterPage extends Component {
  render() {
    const id = Math.random();
    return (
      <div>
        <h1>RouterPage</h1>
        <BrowserRouter>
          <Link to="/">首頁</Link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Link to="/user">用戶中心 </Link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          {/* <Link to="/login">LoginPage </Link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; */}
          <Link to={`/search/${id}`}>搜索頁面 </Link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Link to="/a">404 </Link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

          <Switch>
            {/* 渲染優先級：children > component > render */}
            {/* <Route exact component={HomePage} path="/" /> */}
            {/* 路由守衛 */}
            <PrivateRoutePage exact component={HomePage} path="/" />
            <PrivateRoutePage component={UserPage} path="/user" />
            <Route component={LoginPage} path="/login" />
            <PrivateRoutePage component={SearchPage} path="/search/:id" />
            <Route component={() => (<h1>404</h1>)} />
          </Switch>
        </BrowserRouter>
      </div>
    )
  }
}

• 路由守衛頁面邏輯
  • 登錄信息存儲在store中
  • 沒有登錄時，重定向頁面，並且存儲當前頁面path, 在state中

  • import React, { Component } from 'react'
    import {Route, Redirect} from 'react-router-dom'
    import {connect} from 'react-redux';
    
    @connect(
      state => state.user,
    )
    class PrivateRoutePage extends Component {
      render() {
        const {path, component, isLogin} = this.props;
        console.log('&&&&&&&&&&', this.props);
        
        if(isLogin) {
          return <Route  component={component} />
        } else {
          return (
            <Redirect
              to={{
                pathname: '/login',
                state: {redirect: path}
              }}
            />
          )
        }
      }
    }
    
    export default PrivateRoutePage

• 登錄頁面邏輯
  • 沒有登錄，顯示登錄頁面信息
  • 登錄了，頁面重定向之前的頁面

  • import React, { Component } from 'react'
    import {Button} from 'antd'
    import {connect} from 'react-redux'
    import { Redirect } from 'react-router-dom';
    
    @connect(
      // mapStateToProps
      state => state.user,
      // mapDispatchToProps
      {
        login: () => ({type: "loginSuccess"})
      }
    )
    
    class LoginPage extends Component {
      // 登錄
      handleLogin = () => {
        this.props.login();
      }
      render() {
        const {location, isLogin} = this.props;
        console.log('props====', this.props);
        const {redirect = '/'} = location.state;
        if (isLogin) {
          return (<Redirect
            to={redirect} 
          />)
        } else {
          return (
            <div>
              <h1>LoginPage</h1>
              {
                !isLogin && (
                  <Button type="primary" onClick={this.handleLogin}>登錄</Button>
                )
              }
            </div>
          )
        }
      }
    }
    
    export default LoginPage