axios拦截器和导航守卫

axios拦截器

每次发送请求之前判断vuex或者本地存储中是否存在token

如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况

即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断

export function setToken(tokenKey, token) {
    return localStorage.setItem(tokenKey, token)
}

export function getToken(tokenKey) {
    return localStorage.getItem(tokenKey)
}

export function removeToken(tokenKey) {
    return localStorage.removeItem(tokenKey)
}



import axios from 'axios'
import { getToken } from './utils/token'
import { Message } from 'element-ui'

const service = axios.create({
    baseURL: '/api',
    timeout: 3000
})

// 请求拦截器
service.interceptors.request.use((config) => {
    // 在发送前做些什么
    // 获取并设置token
    // console.log(getToken('token'))
    config.headers['token'] = getToken('token')
    return config
}, (error) => {
    return Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use((response) => {
    // 对响应数据做些什么
    let { status, message } = response.data
    if (status !== 200) {
        Message({type: 'warning', message: message || 'error'})
    }
    return response
}, (error) => {
    // 对响应错误做点什么
    return Promise.reject(error)
})

export default service

导航守卫

导航守卫就是我们进行某些页面的时候需要判断当前用户是否登录过，如果登陆过，则可以跳转，否则重定向到登录页面

导航守卫只是前端做出判断，检查请求头中是否带有token，并不能判断token是否失效;或者是否带有角色信息等，进而判断是否允许导航跳转页面

//添加路由守卫:：通过判断来决定当前的路由跳转到底能不能进行，这种守卫，只要进行路由的跳转就会自动的触发，不能人为调用
    router.beforeEach((to, from, next) => {     
      // 判断当前用户是否登陆，如果登陆了则可以跳转，否则重定向到登陆页
      // 获取用户登陆之后的token，进行token的判断
      if (to.path !== '/login' || to.path !== '/register') { // 非登录页面验证是否存在token
        let token = localStorage.getItem('token')
        if (token) {
          next()
        } else {
          Toast('请先登陆')
          // 说明没有登陆，则重定向到登陆页
          next({ name: 'login' })
        }
      } else {
        next()
      }
    })