VUE全局导航守卫、请求、响应拦截器的设置

文件设置参考地址：https://gitee.com/wang_yu5201314/headlines__news/tree/master/%E9%A1%B9%E7%9B%AE%E6%BA%90%E7%A0%81%E6%96%87%E4%BB%B6/src

文件夹 Router 文件夹 index.js 中设置全局导航守卫
文件 mian.js 中设置请求、响应拦截器

设置请求、响应拦截器

// ************************* axios **************************************

import axios from 'axios'axios.defaults.baseURL = 'http://localhost:3000'
Vue.prototype.$axios = axios

// 请求拦截器

axios.interceptors.request.use(config => {// 拦截请求 , 给每个需要token请求的地方添加tokenlet token = localStorage.getItem('token')if (token) {config.headers.Authorization = token}return config
})

// 响应拦截器

axios.interceptors.response.use(res => {// console.log('响应被截胡了', res)const { message, statusCode } = res.dataif (message === '用户信息验证失败' && statusCode === 401) {// 1. 提示Toast.fail('token失效')// 2. 删除本地token 和 user_idlocalStorage.removeItem('token')localStorage.removeItem('user_id')// 3. 跳转 login// router.push('/login')router.push({name: 'login',params: {back: true,},})}return res
})

VUE全局导航守卫

// 全局导航守卫
// 说明 : 只要路由改变了就会走导航守卫 ( /login  => /user )
// to   : 将要访问哪里   ($route路由对象 to.path)  ★
// from : 从哪里来       ($route路由对象 from.path)
// next : 是否放行
//        next()  => 直接放行     ★
//        next(false)  => 不放行
//        next('/login')  => 像重定向 => 放行 => 去 /login  ★
router.beforeEach((to, from, next) => {// console.log('to', to.path)let token = localStorage.getItem('token')// 把需要拦截未登录访问的权限页面 全部都加到数组里面let autlUrlArr = ['/user', '/myfollow', '/mycomments', '/mystar']// 如果访问的是 /user  => 继续判断// if(to.path === '/user' || to.path)// if (autlUrlArr.indexOf(to.path) > -1) {if (autlUrlArr.includes(to.path)) {// 如果登录了 可以访问if (token) {next()} else {// 如果没有登录 跳转到登录页面next('/login')}} else {// 如果访问的是 /login  /register  => 永远可以next()}
})