ios 传递token给html5,axios请求携带Token到headers中的问题

同事封装了一个api.js具体代码在这里

import axios from "axios";

import {Loading, Message} from "element-ui";

let baseapi = "http://127.0.0.1:8889/",

instance = axios.create({

baseURL: baseapi,

headers: {

"content-type": "application/json",

"token": localStorage.getItem("token")

}

}),

fileInstance = axios.create({

baseURL: baseapi,

headers: {

"content-type": "multipart/form-data",

"token": localStorage.getItem("token")

}

});

export var dataAjax = params => {

/***

* @type {vue}

* @param {method,url,successCall,successMsg,failCall,failMsg}

*/

let loadingInstance = params.loading ? Loading.service({

body: true,

text: params.loading,

background: "rgba(0,0,0,0.5)"

}) : null;

let method = params.method,

url = baseapi + params.url,

callback = res => {

if (params.loading) loadingInstance.close();

if (!res || !res.data) {

Message({

message: "请求失败，请重试",

type: "error"

});

if (params.failCall) params.failCall();

} else if (res.data.code === "10403" || res.data.code === "10401") {

//当没权限的时候

Message({

message: res.data.msg,

type: "error"

});

router.push("/login");

sessionStorage.removeItem("activeIndex");

sessionStorage.removeItem("navName");

localStorage.removeItem("menuList");

localStorage.removeItem("userInfo");

localStorage.removeItem("token");

}

else if (res.data.code === "200") {

if (params.successMsg) {

Message({

message: params.successMsg || res.data.msg,

type: "success"

});

}

if (params.successCall) params.successCall(res.data);

} else if (res.data) {

if (params.file) {

if (params.successMsg) {

Message({

message: params.successMsg,

type: "success"

});

}

if (params.successCall) params.successCall(res.data);

return;

}

Message({

message: params.failMsg || res.data.msg || "请求失败，请重试",

type: "error"

});

if (params.failCall) params.failCall(res);

}

},

error = res => {

if (params.loading) loadingInstance.close();

Message({

message: "请求失败",

type: "error"

});

if (params.failCall) params.failCall(res);

};

if (!method || method === "get") {

// 加上时间戳，解决ie下的缓存问题(304)

instance.get(url + "?t=" + new Date().getTime(), {

params: params.data

}).then(callback).catch(error);

} else {

if (method === "post") {

fileInstance.headers = {

"content-type": "multipart/form-data",

"token": localStorage.getItem("token")

};

if (params.file) {

fileInstance.post(url, params.data).then(callback).catch(error);

} else {

instance.post(url, params.data).then(callback).catch(error);

}

} else if (method === "delete") {

instance.delete(url, {

params: params.data

}).then(callback).catch(error);

} else if (method === "put") {

instance.put(url, params.data).then(callback).catch(error);

}

}

};

export const baseApi = baseapi;

export const Instance = instance;

export const FileInstance = fileInstance;

export const imgApi = "--";

问题是这样的，每次请求都在请求头中添加一个token带到后台进行权限判断，后来发现在第一次登录后不会有任何的问题。结果退出登录后再次登录进入系统会发现请求头里面的token使用的是上一次的token。

我尝试了很多次，像每一次请求的时候修改它里面的请求头都没有用，后面是发现这个create的问题，因为是create所以不会二次创建所以会出现这种问题

axios.create({

baseURL: baseapi,

headers: {

"content-type": "multipart/form-data",

"token": localStorage.getItem("token")

}

});

然后使用前端请求拦截器给没一个请求进行加入token的操作，这样完美解决这种问题

// 添加请求拦截器

Instance.interceptors.request.use(

config => {

const token = localStorage.getItem("token");

if (token) {

// 判断是否存在token，如果存在的话，则每个http header都加上token

config.headers['token'] = token;

}

return config;

},

error => {

return Promise.reject(error);

}

);

FileInstance.interceptors.request.use(

config => {

const token = localStorage.getItem("token");

if (token) {

// 判断是否存在token，如果存在的话，则每个http header都加上token

config.headers['token'] = token;

}

return config;

},

error => {

return Promise.reject(error);

}

);