react全家桶之router（二）路由守卫

前言：项目中访问页面时需要判断用户是否登录来设置权限
实现思路：创建高阶组件包装Route使用，具有权限判断功能
1、创建PrivateRoute
components/PrivateRoute.js

import React, { Component } from 'react';
import { connect } from "react-redux";
import { Route, Redirect } from "react-router-dom";
import LoginPage from "../pages/LoginPage";

// component:Cmp-->将组件名为component重命名为Com
export function PrivateRoute({
    component: Cmp, isLogin, ...rest
}) {
    console.log('isLogin', isLogin, 'rest', rest)
    return (
        <Route
            {...rest}
            render={
                props => isLogin ? (
                    <Cmp {...props} />
                ) : (
                        <Redirect
                            to={{
                                pathname: "/login",
                                state: { redirect: props.location.pathname },
                            }}
                        />
                    )
            }
        />
    )
}

export default connect(state => {
    return {
        isLogin: state.user.isLogin,
    };
})(PrivateRoute)

2、常见LoginPage
pages/LoginPage.js

import React, { Component } from 'react';
import { connect } from "react-redux";
import { Route, Redirect } from "react-router-dom";

// component:Cmp-->将组件名为component重命名为Com
export function PrivateRoute({
    component: Cmp, isLogin, ...rest
}) {
    return (
        <Route
            {...rest}
            render={
                props => isLogin ? (
                    <Cmp {...props} />
                ) : (
                        <Redirect
                            to={{
                                pathname: "/login",
                                state: { redirect: props.location.pathname },
                            }}
                        />
                    )
            }
        />
    )
}

export default connect(state => {
    return {
        isLogin: state.user.isLogin,
    };
})(PrivateRoute)

3、配置路由，RouterPage
pages/RouterPage.js

import React, { Component } from 'react'
import { BrowserRouter, Link, Route, Switch } from "react-router-dom"
import PrivateRoute from "../components/PrivateRoute"
import LoginPage from './LoginPage';
import UserPage from './UserPage'

export default class RouterPage extends Component {
    render() {
        return (
            <div>
                <h1>RouterPage</h1>
                <BrowserRouter>
                    <nav>
                        <Link to="/user">用户中心</Link>
                    </nav>
                    <Switch>
                        <Route exact path="/" component={HomPage} />
                        <Route path="/login" component={LoginPage} />
                        <PrivateRoute path="/user" component={UserPage} />
                    </Switch>
                </BrowserRouter>
            </div>
        )
    }
}

4、整合redux，获取和设置登陆状态，创建store
./store/index.js

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";

const initialLogin = {
    isLogin: false,
    name: null
}

function loginReducer(state = { ...initialLogin }, action) {
    switch (action.type) {
        case "getuserInfo":
            return { ...state, isLogin: false };
        case "loginSuccess":
            return { ...state, isLogin: true, name: 'kiki' };
        case "loginFailure":
            return { ...initialLogin }
        case "logout":
            return { ...state, isLogin: false, name: null };
        default:
            return state;
    }
}

const store = createStore(
    combineReducers({ user: loginReducer }),
    applyMiddleware(thunk),
);

export default store;

5、在首页使用Provider传递store
index.html

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './store'
import { Provider } from 'react-redux'

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'));

完毕！