vue 前端关于token的使用

token

token在前后端项目里越来越被广泛运用，由于校验用户是否正常登陆在线。但一般设置有实效，一个小时，或者两个小时，当用户超时不使用时token就会失效，需要重新登陆或者重新刷新token。

1. vue如何使用token

在登陆请求成功后设置token（一般由后端生成token）

this.$https.post('api/user/login', postData).then((res) => {

if(res.code == 0){ //登陆成功

let accessToken = res.result.token;//从后台返回的token

localStorage.setItem('accessToken', accessToken); // 用localStorage缓存token值

}

})

2.封装http的地方设置全局token（一次性设置，每次http请求就会自动携带token）

import axios from "axios";

import qs from "qs";

const httpService = axios.create({

baseURL: window.api.url,

timeout: 600000,

responseType: `json`,

transformRequest: [data => qs.stringify(data)],

headers: {

"Conten-Type": `appplication/x-www-form-urlencoded;charset=utf-8`

}

});

// 在配置里参数里设置Authorization 将 token 赋值给它

httpService.interceptors.request.use(

config => {

// 设置token start

let accessToken = localStorage.getItem('accessToken');

if (accessToken && accessToken !== '') {

config.headers.common['Authorization'] = accessToken;

}

// 设置token end

return config;

},

error => Promise.reject(error)

);

// 在请求响应的地方回设 token

httpService.interceptors.response.use(

response => {

// 回设置token start

let accessToken = response.headers['authorization'];

if (accessToken && accessToken !== '') {

localStorage.setItem('accessToken', accessToken);

}

// 回设置token end

return response.data;

},

// 请求异常信息提示处理

error => {

if (error && error.response) {

switch (error.response.status) {

case 400:

error.message = `错误请求`;

break;

case 401:

error.message = `未授权，请重新登录`;

break;

case 403:

error.message = `拒绝访问`;

break;

case 404:

error.message = `请求错误,未找到该资源`;

break;

case 405:

error.message = `请求方法未允许`;

break;

case 408:

error.message = `请求超时`;

break;

case 500:

error.message = `服务器端出错`;

break;

case 501:

error.message = `网络未实现`;

break;

case 502:

error.message = `网络错误`;

break;

case 503:

error.message = `服务不可用`;

break;

case 504:

error.message = `网络超时`;

break;

case 505:

error.message = `http版本不支持该请求`;

break;

default:

error.message = `未知错误${error.response.status}`;

}

} else {

error.message = "连接到服务器失败";

}

return Promise.reject(error);

}

);

// 请求方法封装

/*

* get请求

* url:请求地址

* params:参数

* */

export function get(url, params = {}) {

return new Promise((resolve, reject) => {

httpService({

url: url,

method: `get`,

params: params

})

.then(response => {

resolve(response);

})

.catch(error => {

reject(error);

});

});

}

/*

* post请求

* url:请求地址

* params:参数

* */

export function post(url, params = {}) {

return new Promise((resolve, reject) => {

httpService({

url: url,

method: `post`,

data: params

})

.then(response => {

resolve(response);

})

.catch(error => {

reject(error);

});

});

}

/*

* 文件上传

* url:请求地址

* params:参数

* */

export function fileUpload(url, params = {}) {

return new Promise((resolve, reject) => {

httpService({

url: url,

method: `post`,

data: params,

headers: { "Content-Type": `multipart/form-data` }

})

.then(response => {

resolve(response);

})

.catch(error => {

reject(error);

});

});

}

export default {

get,

post,

fileUpload

};