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请求的地方添加token
  let token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = token
  }
  return config
})

// 响应拦截器

axios.interceptors.response.use(res => {
  // console.log('响应被截胡了', res)
  const { message, statusCode } = res.data
  if (message === '用户信息验证失败' && statusCode === 401) {
    // 1. 提示
    Toast.fail('token失效')

    // 2. 删除本地token 和 user_id
    localStorage.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()
  }
})