1.最近看视频学习react时遇到的这样一个问题。针对登陆的token失效时,刷新页面。肯定是要跳转到登陆页面让用户重新登陆的,但是React中和Vue不同,跳转依赖于router的hooks函数useHistory.但是在组件中才可以使用history,push()进行跳转,在函数中直接是使用不了的。于是看到这样的解决办法
<1> 在utils下面新建一个history.js文件
import { createBrowserHistory } from "history"; // 这里的createBrowserHistory就是App.js中直接使用的BrowserHistory
const history = createBrowserHistory()
export { history }
<2> 在App.js中引入history
// 注意:此处,需要导入 Router 组件
import { Router } from 'react-router-dom'
import { history } from '@/utils'
function App() {
return (
<Router history={history}></Router>
)
}
<3> 在request.js拦截器中
import {history} from "@/utils/history" // 引入定义的history
instance.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
},
function (error) {
// 对响应错误做点什么
if (!error.response) {
message.error("网络错误,请重新连接后再试", 1)
return Promise.reject(error);
}
if (error.response.status === 401) {
message.error("登陆信息过期,请重新登陆", 1)
//清除token
store.dispatch(lougout());
// 跳转到登陆页
history.push('/login');
};
});
然后就可以使用了,具体原理是react的router路由是有三个rouuter,BrowserHistory,hashHistory。…好吧其实我也没懂😢