在 axios 库中，我们一般使用 interceptors 对接口请求或者接口响应进行拦截，代码如下：
const $http = axios.create({ headers: defaultConfig.headers }) // request拦截器 $http.interceptors.request.use(config => { ...... return config }, error => { // Do something with request error Promise.reject(error) })而我们如何进行路由拦截呢？当然是使用 vue-router 全局钩子函数。
在 使用 vue-router 全局守卫钩子函数，根据登录状态进行路由拦截以及滚动条回到页面顶部 文件中，我们使用 beforeEach 钩子函数进行登录状态的路由拦截；
除了对登录状态进行拦截还可以对用户是否认证进行拦截；当用户认证过后才能访问该路由；实现代码如下：
// 需要登录的路由 const loginPages = [ '/certification', '/order', '/order-detail', ] // 需要认证 const authPages = [ '/order', '/order-detail', ] router.beforeEach((to, from, next) => { const mtToken = Cookies.get('AppAuthorization') const wlToken = Cookies.get('WlAuthorization') if (to.query.source === 'mt' && mtToken && !wlToken) { // 其他网站过来 - 自己未登陆 store.commit('setToken', mtToken) store.dispatch('BaseInfo') } else { // 自己网站登陆 // 判断需要登录的路由 防止通过直接改变url进入相应页面 if ((loginPages.includes(to.path) || to.path.includes('personalCenter')) && !store.state.user.userInfo.userId) { store.commit('setLoginVisible', true) // 打开登录 next({ path: from.path || '/' }) // 将路由重置为from.path return } } // 判断需要认证的路由 if (authPages.includes(to.path) && !utils.checkAuth(store.state.user.userInfo.authStatus)) { next({ path: from.path || '/' }) // 将路由重置为from.path return } next() })
