class Request {
constructor() {
this.baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '/'; // 设置请求baseURL
this.timeout = 2000; // 设置请求超时时间
}
request(config){// 这里的config是请求的时候传递的参数配置对象，比如url、method、data等
const instance = axios.create({ // 创建axios实例
baseURL: this.baseURL,
timeout: this.timeout,
});
// 设置拦截器
instance.interceptors.request.use((config) => { // 请求拦截之后就是要使用这个config, config表示整个请求对象
config.headers.Authorization = localStorage.getItem('token'); // 将token从localStorage中取出并添加到请求头的Authorization字段上
return config; // 返回请求对象，继续向服务器发起请求
}, err => Promise.reject(err));
// 设置响应拦截器
instance.interceptors.response.use(res => res.data, err => Promise.reject(err));
return instance(config);
}
}
export default new Request();
四、通过路由钩子进行登录校验
我们需要在路由跳转之前，进行登录校验，即校验登录的token是否已经过期，如果token没有失效，则可以继续访问页面；如果token已经失效，那么检查一下所访问的页面是否需要登录才能访问，如果是需要登录后才能访问，那么跳转到登录页面；如果是不需要登录也能访问的页面则继续访问；
const whiteList = ["/"]; // 定义一个白名单列表
router.beforeEach(async (to, from, next) => {
if (whiteList.includes(to.path)) { // 如果是访问的白名单中的页面
return next(); // 不需要校验，直接返回继续访问该页面
}
const isTokenAvailable = await store.dispatch('validate'); // 校验token是否失效
if (isTokenAvailable) { // 如果token未失效
if(to.path === "/login") { // 如果访问的是login页面，则回到首页
next("/");
} else { // 如果访问的不是login页面，则继续访问当前要访问的页面
next();
}
} else { // 如果token失效了
const needLogin = to.matched.some(item => item.meta.needLogin); // 检测要访问的页面是否需要登录才能访问
if(needLogin) { // 如果访问的页面是需要登录的
next("/login"); // 跳转到登录页面
} else { // 如果访问的页面是不需要登录的，则直接继续访问
next();
}
}
});
上面item.meta.needLogin，这个needLogin是在router中进行自定义配置的，在配置路由的时候，允许通过meta属性配置一些自定义的元数据，如下所示:
export default new Router({
routes: [
{
path: '/profile',
