前兩天在做登錄注冊的一個思考。無論采取jwt或者cookie驗證的方法，前端一旦判斷請求的驗證無效，那么頁面要重定向要登錄頁面去重新登錄。 下面我的解決方法：

生成routerStore

在組件內部可以通過withRouter訪問路由history。 這里通過將history保存在routerStore，以后后續使用。

import {observable, action} from 'mobx'class RouterStore {@observable history = null@actionsetHistory(history) {this.history = history} }export default new RouterStore(); 復制代碼

在之前App.js里面將Store引入。

import countStore from './mobx/CountStore' import changeNameStore from './mobx/ChangeNameStore' import routerStore from './mobx/RouterStore'const stores = {countStore,changeNameStore,routerStore, } 復制代碼

在axios里面進行全局登錄判斷

首先在Main組件中將history復制給store的history。

@withRouter @inject("routerStore") @observer class Home extends React.Component {constructor(props) {super(props)// 沒有super(props), 后面使用回報錯// 定義state// bind方法// 其他初始化工作this.props.routerStore.history = this.props.history} 復制代碼

在axios的攔截器中做全局判斷：

// Add a response interceptor instance.interceptors.response.use( (response) => {// 返回錯誤判斷console.log("filter error code")// 判斷如果需要登錄，routerStore.history.replace("/login")routerStore.history.replace("/login")return response; }, (error) => {// 可以在后面的請求中catchconsole.log("interceptors response error")return Promise.reject(error); }); 復制代碼

這里做個測試，每一個請求都重定向到login。 測試成功，完整代碼請查看:
github: https://github.com/yunshuipiao/react-mobx-axios

不借助mobx

鑒權，登錄重定向的判斷都在axios的攔截器中，可以考慮將這部分代碼在component中實現，這樣可以用history去重定向到登錄頁面。

@withRouter @inject("routerStore") @observer class Home extends React.Component {constructor(props) {super(props)//init and bind// axios interceptors}render() {return (<div><Switch><Route path="/login" component={Login}/><Route path="/" component={Main}/></Switch></div>);} } 復制代碼

總結

以上是生活随笔為你收集整理的axios + router4 + mobx：对于全局登录的思考的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。