发送携带token，cookie的axios请求

1. 安装 js-cookie

npm install js-cookie -s

在src下面创建utils文件夹，并创建auth.js文件

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)
}

使用vuex调用回来token

import Vue from 'vue'
import Vuex from 'vuex'
import {setToken} from '../utils/auth'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    token:undefined,
  },
  getters:{
      getToken:state=>{
        return  state.token;
      },
  },
  mutations: {
    SET_TOKEN(state,token){
      console.log(token)
      setToken(token)
      state.token=token;
    },
  },
  actions: {
  }
})

export default store;

在同目录下创建request.js文件

import axios from 'axios'
import { getToken } from './auth.js'
import { MessageBox, Message } from 'element-ui'
import store from '../store/index'

const service = axios.create({
	//代理地址
  baseURL: "/api/", // url = base url + request url
  // withCredentia//ls: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

service.interceptors.request.use(
  config => {
      // do something before request is sent
      if (store.getters.getToken) {
          // let each request carry token
          // ['X-Token'] is a custom headers key
          // please modify it according to the actual situation
          config.headers['Authorization'] = "Bearer " + getToken()
      }
      return config
  },
  error => {
      // do something with request error
      console.log(error) // for debug
      return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
   */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
      const res = response.data
      // if the custom code is not 20000, it is judged as an error.
      if (res.status === 10004 || res.status === 10003) {
          // to re-login
          MessageBox.confirm('您已经登出，您可以取消停留在此页面或再次登录', '确认登出', {
              confirmButtonText: '重新登录',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              // store.dispatch('user/resetToken').then(() => {
              //     location.reload()
              // })
          })
      } else if (res.status === 403) {
          Message({
              message: res.msg || '操作失败',
              type: 'error',
              duration: 3 * 1000
          })
          return Promise.reject(new Error(res.msg || '操作失败'))
      } else if (res.status !== 200) {
          Message({
              message: res.msg || '操作失败',
              type: 'error',
              duration: 3 * 1000
          })

          // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;

          return Promise.reject(new Error(res.msg || '操作失败'))
      } else {
          return res
      }
  },
  error => {
      console.log('err' + error) // for debug
      let { message } = error;
      if (message == "Network Error") {
          message = "后端接口连接异常";
      } else if (message.includes("timeout")) {
          message = "系统接口请求超时";
      } else if (message.includes("Request failed with status code")) {
          message = "系统接口" + message.substr(message.length - 3) + "异常";
      }
      Message({
          message: message,
          type: 'error',
          duration: 3 * 1000
      })
      return Promise.reject(error)
  }
)

export default service

以下是若要登录获取token需要的配置
我将所需要的接口都放在了api文件夹中，api文件夹自己创建的
在src/api/home.js中

后端给予的接口
import request from '../utils/request'
let qs = require("qs")

export function login(data) {
  return request({
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      url: '/auth/login',
      method: 'post',
      data: qs.stringify(data)
  })
}

qs.stringify为将json转换为formdata

或者用

 const params = new FormData();
 params.append('username', this.loginForm.username);
 params.append('password', this.loginForm.password);

在app.js中调用或者在home.js中调用

 import * as home from './api/home.js'
	created () {
         this.login();
    },

    methods: {
      login() {
        home.login({username: 'admin',password:'admin'}).then(res => {
        	// res返回token并传到vuex中保存
            this.$store.commit("SET_TOKEN",res.data.access_token);
            this.$router.push("/home")
        })
      }
    }