1.登錄獲取到token存到cookie中
?這里我的cookie設(shè)置為一天失效
cookie.js代碼如下
// 設(shè)置cookie
export function setCookie(c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie =
c_name +
'=' +
encodeURIComponent(value) +
';expires=' +
exdate.toGMTString() +
';path=/';
}
// 讀取cookie
export function getCookie(c_name) {
let c_start = null;
let c_end = null;
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(c_name + '=');
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
c_end = document.cookie.indexOf(';', c_start);
if (c_end == -1) c_end = document.cookie.length;
return decodeURIComponent(document.cookie.substring(c_start, c_end));
}
}
return '';
}
// 檢查cookie
export function checkCookie(c_name) {
let username = getCookie(c_name);
console.log(username);
if (username != null && username != '') {
return true;
} else {
return false;
}
}
// 清除cookie
export function clearCookie(name) {
setCookie(name, '', -1);
}
main.js導(dǎo)入到全局使用
import { setCookie, getCookie, checkCookie, clearCookie } from '@/utils/cookie';
Vue.prototype.$setCookie = setCookie;
Vue.prototype.$getCookie = getCookie;
Vue.prototype.$checkCookie = checkCookie;
Vue.prototype.$clearCookie = clearCookie;
request.js請求頭添加token
//導(dǎo)入
import {
getCookie
} from '@/utils/cookie'
//使用
service.interceptors.request.use(
res => {
if (res) {
if (getCookie("token")) {
res.headers.Authorization = getCookie("token")
}
return res;
}
},
err => {
return Promise.reject(err);
}
);
?最后瀏覽器可查看到
文章來源：http://www.zghlxwxcb.cn/news/detail-610617.html
?并且下一次發(fā)請求時候請求參數(shù)中可查看到
文章來源地址http://www.zghlxwxcb.cn/news/detail-610617.html
到了這里，關(guān)于vue 前端登錄獲取token后添加到cookie，并使用token獲取其他數(shù)據(jù)（添加到請求頭中）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![SpringBootWeb 登錄認證[Cookie + Session + Token + Filter + Interceptor]](https://imgs.yssmx.com/Uploads/2024/02/828157-1.png)
