怎麼使用react router4+redux實現路由權限控制

這次帶給大家怎麼使用react router4 redux實現路由權限控制，使用react router4 redux實現路由權限控制的注意事項有哪些，下面就是實戰案例，一起來看一下。

總體概述

一個完善的路由系統應該是這樣子的，當連結到的元件是需要登入後才能查看，要能夠跳到登入頁，然後登入成功後又跳回來之前想造訪的頁面。這裡主要是用一個權限控制類別來定義路由路由訊息，同時用redux把登入成功後要存取的路由位址給保存起來，登入成功時看redux裡面有沒有儲存位址，如果沒有儲存位址就跳到預設路由位址。

路由權限控制類別

在這個方法裡面，透過sessionStorage判斷是否登入了，如果沒有登錄，就儲存目前想要跳轉的路由到redux裡面。然後跳到我們登入頁。

import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { setLoginRedirectUrl } from '../actions/loginAction'
class AuthorizedRoute extends React.Component {
  render() {
    const { component: Component, ...rest } = this.props
    const isLogged = sessionStorage.getItem("userName") != null ? true : false;
    if(!isLogged) {
      setLoginRedirectUrl(this.props.location.pathname);
    }
    return (
        <route> {
          return isLogged
              ? <component></component>
              : <redirect></redirect>
        }} />
    )
  }
}
export default AuthorizedRoute</route>

路由定義訊息

路由資訊也很簡單。只是對需要登入後才能查看的路由用AuthorizedRoute定義。

import React from 'react'
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
import Layout from '../pages/layout/Layout'
import Login from '../pages/login/Login'
import AuthorizedRoute from './AuthorizedRoute'
import NoFound from '../pages/noFound/NoFound'
import Home from '../pages/home/Home'
import Order from '../pages/Order/Order'
import WorkOrder from '../pages/Order/WorkOrder'
export const Router = () => (
    <browserrouter>
      <p>
        <switch>
          <route></route>
          <redirect></redirect>{/*注意redirect转向的地址要先定义好路由*/}
          <authorizedroute></authorizedroute>
          <route></route>
        </switch>
      </p>
    </browserrouter>
)

登入頁

就是把存在redux裡面的位址給取出來，登入成功後就跳過去，如果沒有就跳到預設頁面，我這裡是預設跳到主頁。因為用了antd的表單，程式碼有點長，只要要看連接redux那兩句和handleSubmit裡面的內容。

import React from 'react'
import './Login.css'
import { login } from '../../mock/mock'
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux'
const FormItem = Form.Item;
class NormalLoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.isLogging = false;
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.isLogging = true;
        login(values).then(() => {
          this.isLogging = false;
          let toPath = this.props.toPath === '' ? '/layout/home' : this.props.toPath
          this.props.history.push(toPath);
        })
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
        

                       {getFieldDecorator('userName', {               rules: [{ required: true, message: 'Please input your username!' }],             })(                 } placeholder="Username" />             )}                                   {getFieldDecorator('password', {               rules: [{ required: true, message: 'Please input your Password!' }],             })(                 } type="password" placeholder="Password" />             )}                                   {getFieldDecorator('remember', {               valuePropName: 'checked',               initialValue: true,             })(                 Remember me             )}             Forgot password                            {this.isLogging ? 'Loging' : 'Login'}                          Or register now!                    

    );   } } const WrappedNormalLoginForm = Form.create()(NormalLoginForm); const loginState = ({ loginState }) => ({   toPath: loginState.toPath }) export default withRouter(connect(     loginState )(WrappedNormalLoginForm))

順便說一下這裡redux的使用吧。我暫時只會基本上使用方法：定義reducer，定義actions,建立store，然後在需要使用redux的變數時候去connect一下redux，需要dispatch改變變數時，就直接把actions裡面的方法引入，直接調用就可以啦。為了讓actions和reducer裡面的事件名稱對的上，怕打錯字和方便後面修改吧，我建了個actionsEvent.js來存放事件名稱。
reducer:

import * as ActionEvent from '../constants/actionsEvent'
const initialState = {
  toPath: ''
}
const loginRedirectPath = (state = initialState, action) => {
  if(action.type === ActionEvent.Login_Redirect_Event) {
    return Object.assign({}, state, {
      toPath: action.toPath
    })
  }
  return state;
}
export default loginRedirectPath

actions:

import store from '../store'
import * as ActionEvent from '../constants/actionsEvent'
export const setLoginRedirectUrl = (toPath) => {
  return store.dispatch({
         type: ActionEvent.Login_Redirect_Event,
        toPath: toPath
       })
}

創建store

import { createStore, combineReducers } from 'redux'
import loginReducer from './reducer/loginReducer'
const reducers = combineReducers({
  loginState: loginReducer //这里的属性名loginState对应于connect取出来的属性名
})
const store = createStore(reducers)
export default store

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

使用JS判斷字串中包含內容方法總結

Angular RouterLink做出不同的花式跳轉

以上是怎麼使用react router4+redux實現路由權限控制的詳細內容。更多資訊請關注PHP中文網其他相關文章！