接口封装/路由处理等

// 封装请求函数
import axios from 'axios'
import router from '@/router'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 5000
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 判断是否存在token
    if (localStorage.getItem('token')) {
      // 在请求头中携带token
      config.headers.Authorization = localStorage.getItem('token')
    }
    return config
  },
  error => {
    console.log(error)
    Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    // 请求成功，返回数据
    if (res.code === 200) {
      return res
    } else {
      // 根据状态码提示错误信息
      switch (res.code) {
        case 401:
          // 无权限，跳转到登录页面并清除token
          localStorage.removeItem('token')
          router.push('/login')
          break
        case 403:
          alert('没有操作权限')
          break
        case 404:
          alert('请求的资源不存在')
          break
        case 500:
          alert('服务器内部错误')
          break
        default:
          alert(res.message)
      }
      return Promise.reject(res.message || 'Error')
    }
  },
  error => {
    console.log('err' + error)
    alert(error.message)
    return Promise.reject(error)
  }
)

export default service

// 路由守卫
import router from '@/router'

router.beforeEach((to, from, next) => {
  // 判断是否需要登录才能访问该路由
  if (to.meta.requireAuth) {
    // 判断是否存在token
    if (localStorage.getItem('token')) {
      next()
    } else {
      // 跳转到登录页面
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

// 在组件中使用请求
import request from '@/utils/request'

export default {
  data () {
    return {
      userList: []
    }
  },
  mounted () {
    this.getUserList()
  },
  methods: {
    // 获取用户列表
    getUserList () {
      request.get('/user/list').then(res => {
        this.userList = res.data
      })
    }
  }
}