react router v5与v6 在非组件环境下拿到路由信息

v6非组件环境路由跳转

本节目标:  能够在响应拦截器中处理token失效

说明：为了能够在非组件环境下拿到路由信息，需要我们安装一个history包

github.com/remix-run/r…

实现步骤

1. 安装history包：yarn add history
2. 创建 utils/history.js文件
3. 在app.js中使用我们新建的路由并配置history参数
4. 通过响应拦截器处理 token 失效，如果发现是401调回到登录页

代码实现

utils/history.js

import { createBrowserHistory } from 'history'
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'
const history = createBrowserHistory()

export {
  HistoryRouter,
  history
}

app.js

import { HistoryRouter, history } from './utils/history'

function App() {
  return (
    <HistoryRouter history={history}>
       ...省略无关代码
    </HistoryRouter>
  )
}

export default App

utils/http.js

import { history } from './history'

http.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    if (error.response.status === 401) {
      // 删除token
      clearToken()
      // 跳转到登录页
      history.push('/login')
    }
    return Promise.reject(error)
  }
)

v5非组件环境路由跳转

目标：能够统一处理token失效重定向到登录页面

说明：为了能够在非组件环境下拿到路由信息，需要我们自定义 Router 的 history

步骤：

1. 安装：yarn add history
2. 创建 utils/history.js 文件
3. 在该文件中，创建一个 hisotry 对象并导出
4. 在 App.js 中导入 history 对象，并设置为 Router 的 history
5. 通过响应拦截器处理 token 失效

核心代码：

utils/history.js 中：

// 自定义history对象
import { createBrowserHistory } from 'history'

const history = createBrowserHistory()

export default history

App.js 中：

// 注意：此处，需要导入 Router 组件
import { Router } from 'react-router-dom'
import history from '@/utils/history'

function App() {
  return (
    <Router history={history}></Router>
  )
}

utils/request.js 中：

// 添加响应拦截器
instance.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    return response
  },
  function (err) {
    if (err.response.status === 401) {
      // token过期了
      // 提示消息
      message.error('登录信息过期', 1)
      // 清除token
      store.dispatch(logout())
      // 跳转到登录 history

      history.push('/login')
    }
    // 对响应错误做点什么
    return Promise.reject(err)
  }
)