出现这类问题,一般都是在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 />