需求,在非登入情况下不可以进入dashboard.js页面

仓库地址:https://gitee.com/zhouyunfang/react-project/tree/PrivateRoute/

有src路径下创建common文件夹下再创建一个dashboard.js

期间用到了redux,所以也对应的把redux相关的文件给贴出来

import React from 'react'
// 引入路由
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
// auth 传的是否授权
const PrivateRoute = ({ component: Component,auth, ...rest }) => (
        /**
         * 调用rooter方法
         * 它检查用户是否通过了身份验证，
         * 它呈现“组件”道具。如果没有，它将重定向
         * 用户要/登录。
         *  */
        <Route {...rest}
         render={(props) => (
                auth.isAuthenticated === true
                  ? <Component {...props} />
                  : <Redirect to='/login' />
              )
         } />
    )
    // 将状态映射为属性
const mapStateToProps = (state) => ({
    // auth为reducers页面下的authReduce.js传来的用户数据 
    auth: state.auth
})
PrivateRoute.prototype= {
    auth:PropTypes.object.isRequired
}

export default connect(mapStateToProps)(PrivateRoute)

rcs同级下reducers/index.js

/**
 * 如果有多个reducer ，可以使用combineReducers方法将其合并，并暴露出去。
 * 把combineReducers下定义的属于传入store.js
 *  */ 
import {combineReducers} from 'redux'
// 对注册验证使用
import authReducer from './authReducer'

export default combineReducers({
    // 把多个redux放在此处,之后combineReducers会让它合并到最大的reducer中去
    auth:authReducer,

})

rcs同级下reducers/authReducers.js

// 对authAchtions.js返回回来的定义type类型进行判断成功后再把用户数据返回至组件
import { SET_CURRENT_USER } from '../actions/types';
import isEmpty from '../validation/is-empty'
const initialState ={
    isAuthenticated:false,
    user:{}
}
// reducer接受两个参数,State,和action 作为参数,返回一个新的state
export default function(state = initialState,action){
    // 对传过来的type进行配置然后返回
    switch (action.type){
        case SET_CURRENT_USER  :
            return {//如果type类型匹配上就把最新的state赋给initialState中对应的属性,再返回至来源组件(login.js)
                ...state,//可能返回多个,所以用展开运算符
                user:action.payload,//把action下的payload更新至user
                isAuthenticated:!isEmpty(action.payload),//确认授权,为防止payload是空值所以还在判断一下
            }
        default :
        return state;
    }
}

rcs同级下actions/authActions.js

// 用户发送请求的处理方法会在这里执行
import axios from 'axios';
// 引入type类型
import { GET_ERRORS ,SET_CURRENT_USER} from './types'

// 登录信息
export const loginUser = (userData) => dispatch =>{
    axios.post('/api/users/login',userData)
    .then(res =>{//对返回的token进行解构,并存储
        const {token } = res.data;
        localStorage.setItem('jwToken',token)
        //设置axios的headers token
        setAuthToken(token)
        // 解析token
        const decoded = jwt_decode(token)
        // console.log(decoded)
        // 解析之后用dispatch分发
        dispatch(setCurrentUser(decoded))
    }).catch(err =>{
         // 在登录息错误的时候用dispatch把信息返回回去
         dispatch({
            type: GET_ERRORS,
            payload: err.response.data
        })
    })
}
export const setCurrentUser = decoded =>{
    // 设置type,下一步return到reducers/authReducer.js中
    return{
        type:SET_CURRENT_USER,
        payload:decoded
    }
}

rcs同级下actions/type.js

export const SET_CURRENT_USER ="SET_CURRENT_USER"

最后在app.js文件中引入

import React, { Component } from 'react';
// 如果觉得 BrowserRouter 名字太长可以用{BrowserRouter as Router} 后面可以用Router替代
// import {BrowserRouter} from 'react-router-dom'
import { BrowserRouter as Router, Route,Switch } from 'react-router-dom'
// Provider组件，可以让容器中所有的组件拿到state。
import { Provider } from 'react-redux'
import store from './store';
// 引入私有路由
import PrivateRoute from './common/PrivateRoute'
import './App.css';


class App extends Component {
  render() {
    return (
      <Provider store = {store}>
        {/* 用Router把整个标签包裹起来 */}
        <Router>
          <div className="App">
            <Switch>
                {/*使用私有路由 */}
                <PrivateRoute exact path="/Dashboard" component={Dashboard} />
              </Switch>
            </div>
            <Footer />
          </div>
        </Router>
      </Provider>
    )
  }
}

export default App;