react在非组件环境下获取路由信息(history模式进行跳转)

出现这类问题,一般都是在react路由拦截时需要用到

本篇文章介绍( PrivateRoute 和 history )

当我们在请求拦截器中拦截到没有token时,应该是让他回到登录页,

一般想到的是直接使用window.location.href. 但是这样会报错,因为login页面不需要token

那么我们可以换一条思路,在路由匹配规则时进行判断

    <HashRouter>
      <div className="app">
        <Switch>
          <Route path="/login" component={Login}></Route>
          <Route path="/home" component={Layout}></Route>
          {/* 增加一个404 */}
          <Route component={NotFound}></Route>
        </Switch>
      </div>
    </HashRouter >

这是一个简单的路由跳转规则,我们可以在这里判断,但是如何判断呢

安装react-router-dom时，默认会安装history包，我们可以通过这个包来自己创建history对象

方法: 单独引入Router，并自己创建history，

新建一个 history.js 文件

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

const history = createBrowserHistory()

export default history

然后在App.js 使用

//注意这时候我们导入的是Router 和配置的history  
import { Router, Route, Switch } from 'react-router-dom'
import history from '@/utils/history'
import PrivateRoute from '@/utils/AuthRoute'
return (
    <Router history={history}>
      <div className="app">
        <Switch>
          <Route path="/login" component={Login}></Route>
          <PrivateRoute path="/home" component={Layout}></PrivateRoute>
          {/* 增加一个404 */}
          <Route component={NotFound}></Route>
        </Switch>
      </div>
    </Router>
  )

这PrivateRoute  标签就是我们可以自己进行校验

/* eslint-disable react/prop-types */
// 实现自己的PrivateRoute组件 权限判断
import { hasToken } from '@/utils/storage'
import { Route, Redirect } from 'react-router-dom'
// 我们需要解构所有的属性，除了component属性
export default function PrivateRoute ({ component: Component, ...rest }) {
  return (
    <Route
      {...rest}
      render={() => {
        if (hasToken()) {//当有Token时,我们就让他跳到定义的Component
          return <Component></Component>
        } else {
          return <Redirect to="/login"></Redirect>//当没有Token时,直接重定向到/login
        }
      }}
    ></Route>
  )
}

注意 这个时候有无token都可以到login页面, 这个可以进行类似的判断,这里只讲其他页面拦截无token的情况

但是没有token无法跳到home,可以把其他需要拦截的Route标签 替换成<PrivateRoute ><PrivateRoute />