vue 前端关于token的使用(基础)
tokentoken在前后端项目里越来越被广泛运用,由于校验用户是否正常登陆在线。但一般设置有实效,一个小时,或者两个小时,当用户超时不使用时token就会失效,需要重新登陆或者重新刷新token。1.vue如何使用token在登陆请求成功后设置token(一般由后端生成token)this.$https.post('api/user/login', postData).then((res) =&
·
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
};
本篇文章仅供参考学习,做笔记更新,资料是经过观看多位前辈资料学会而来,但不记得是哪几位前辈了,晚辈在此感谢各位提供的学习资料,我自学习并在项目中使用后,经过自我消化,现当做笔记记录并分享给更多想需要的同行。
更多推荐
已为社区贡献2条内容
所有评论(0)