【 vue2-cli 项目配置 】 request 和 permission 配置

首先 我们要对 src 下新建一个utils 文件夹 用来存放我们全局的一些js文件

request.js配置文件 

import axios from 'axios'
import { getToken } from '@/utils/auth'

const opt = {
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 600000 // request timeout
}

// create an axios instance
const service = axios.create(opt)
// request interceptor
service.interceptors.request.use(
  config => {
    let token = getToken()
    if (token) {
      config.headers['Authorization'] = token
    }
    return config
  },
  error => {
    // do something with request error
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => {
    const res = response.data
    return res
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

utils --> auth.js文件用来存储全局可使用的token

import Cookies from 'js-cookie'

const TokenKey = 'token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

permission.js配置文件用来拦截路由

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
import devRoutes from '@/router/dev'

NProgress.configure({ showSpinner: false })

const whiteList = ['/login', '/register']
router.addRoutes(devRoutes)

router.beforeEach((to, from, next) => {
    NProgress.start()
    console.log(`output- to`, to)
    if (getToken()) {
        if (to.path === '/login') {
            next({ path: '/' })
            NProgress.done()