登陆请求拦截

const routes = [
	{
		path: '/',
		name: '/',
		component: Index,
	},
	{
		path: '/myIndex',
		name: 'myIndex',
		meta: {
			requireAuth: true, //添加该字段，表示进入这个路由是需要登录的
		},
		component: myIndex,
	},
	{
		path: '/login',
		name: 'login',
		component: Login,
	},
];

router.beforeEach((to, from, next) => {
	// 判断该路由是否需要登录权限
	if ((to.meta, requireAuth)) {
		// 通过vuex state获取当前的token是否存在
		if (store.state.token) {
			next();
		} else {
			next({
				path: '/login',
				// 将跳转的路由path作为参数，登录成功后跳转到该路由
				query: { redirect: to.fullPath },
			});
		}
	} else {
		next();
	}
});

// http request 拦截器
axios.interceptors.request.use(
	(config) => {
		// 判断是否存在token，如果存在的话，则每个http header都加上token
		if (store.state.token) {
			config.headers.Authorization = `token ${store.state.token}`;
		}
		return config;
	},
	(err) => {
		return Promise.reject(err);
	}
);
 
// http response 拦截器
axios.interceptors.response.use(
	(response) => {
		// 方法一: 根据返回信息
		// response 的信息内容不同, 如请求成功, 但提示Token 超时,
		// 这是 也可以 弹框 提示, 也可以直接跳转至登录页, 例如
		if (response.data.message.indexOf('Token') > -1) {
			router.replace({
				path: 'login',
				query: { redirect: router.currentRoute.fullPath },
			});
		}
		return response;
	},
	(error) => {
		if (error.response) {
			// 方法二: 根据返回状态
			switch (error.response.status) {
				case 401:
					// 返回 401 清除token信息并跳转到登录页面
					store.commit(types.LOGOUT);
					router.replace({
						path: 'login',
						query: { redirect: router.currentRoute.fullPath },
					});
			}
		}
		return Promise.reject(error.response.data); // 返回接口返回的错误信息
	}
);