vue+egg+jwt實現(xiàn)登錄驗證的示例代碼
原理:vue前端登錄,提交賬號密碼給egg后端,后端比對信息后,使用jsonwebtoken對用戶信息進行簽名生成token,之后通過cookie返回給vue前端,前端需要使用token里的信息就使用js-base64進行token第二段解碼即可。
vue前端路由跳轉(zhuǎn),進入路由前置守衛(wèi)檢測cookie中的token是否存在,不存在(已過期)則跳轉(zhuǎn)登錄,否則繼續(xù)執(zhí)行,然后在http攔截器里請求時存在token請求頭帶上token,后端未得到header則返回錯誤碼,得到則用jsonwebtoken進行驗證,是時間錯誤就從新發(fā)放token令牌,否則返回錯誤碼,還要及時更新cookie時間,保證登錄態(tài).
vue前端main.js中:
import axios from 'axios';
import cookie from './public/util';
router.beforeEach((to, from, next) => {
console.log('路由攔截')
//判斷要去的路由有沒有requiresAuth
if (to.meta.requiresAuth) {
let token = cookie.getCookie('token');
if (token) {
next();
} else {
next({
path: '/login'
});
}
} else {
next(); //如果無需token,那么隨它去吧
}
})
// http request 攔截器
axios.interceptors.request.use(
config => {
let token = cookie.getCookie('token');
console.log(token)
if (token) { // 判斷是否存在token,如果存在的話,則每個http header都加上token
config.headers.authorization = `token ${token}`;
}
return config;
},
err => {
return Promise.reject(err);
});
// http response 攔截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 返回 401 清除token信息并跳轉(zhuǎn)到登錄頁面
router.replace({
path: '/login'
});
}
}
return Promise.reject(error.response.data); // 返回接口返回的錯誤信息
});
Vue.prototype.$http = axios;
其中util.js中我封裝了操作cookie的方法
//獲取cookie、
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return (arr[2]);
else
return null;
}
//設(shè)置cookie,增加到vue實例方便全局調(diào)用
function setCookie (c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
};
//刪除cookie
function delCookie (name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
};
module.exports = {
getCookie:getCookie,
setCookie:setCookie,
delCookie:delCookie
}
路由中需要登錄才能訪問的頁面,應(yīng):
path:'/admin/manager',component:Page,name:'管理系統(tǒng)首頁',meta:{requiresAuth:true}
如果需要獲取token中的信息則:
let token = cookie.getCookie('token');
let Base64 = require('js-base64').Base64;
let str = token.split('.')[1];
let user = JSON.parse(Base64.decode(str));
console.log(user)
后端在登錄邏輯執(zhí)行完后,需要給前端發(fā)放token
let jwt = require('jsonwebtoken');
let token = jwt.sign({
user_id:1,
user_name: '張三'
}, '自定義簽名鹽值', {
expiresIn: '60s' //時間根據(jù)自己定,具體可參考jsonwebtoken插件官方說明
});
this.ctx.cookies.set('token', token, {maxAge:60*1000,httpOnly:false,overwrite:true,signed:false})
this.ctx.body = true;
接著是中間件:
module.exports = () => {
const jwt = require('jsonwebtoken');
return async function (ctx, next) {
if (ctx.request.header['authorization']) {
let token = ctx.request.header['authorization'].split(' ')[1];
console.log(token)
let decoded;
//解碼token
try {
decoded = jwt.verify(token, '加簽時定義的鹽值');
} catch (error) {
if (error.name == 'TokenExpiredError') {
console.log('時間到期')
//重新發(fā)放令牌
token = jwt.sign({
user_id: 1,
user_name: '張三'
}, 'sinner77', {
expiresIn: '60s' //過期時間設(shè)置為60妙。那么decode這個token的時候得到的過期時間為 : 創(chuàng)建token的時間 + 設(shè)置的值
});
ctx.cookies.set('token', token, {
maxAge: 60 * 1000,
httpOnly: false,
overwrite: true,
signed: false
});
} else {
ctx.status = 401;
ctx.body = {
message: 'token失效'
}
return;
}
}
//重置cookie時間
ctx.cookies.set('token', token, {
maxAge: 60 * 1000,
httpOnly: false,
overwrite: true,
signed: false
});
await next();
} else {
ctx.status = 401;
ctx.body = {
message: '沒有token'
}
return;
}
}
};
最后在需要登錄才可訪問的資源路由上使用該中間件,如:
const checktoken = app.middleware.checktoken();
router.get('/test',checktoken,controller.util.test);
至此,以cookie維護登錄態(tài),token做登錄權(quán)限驗證就完成了
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue的無縫滾動組件vue-seamless-scroll實例
本篇文章主要給大家講解了vue的無縫滾動組件vue-seamless-scroll的用法,需要的朋友參考學(xué)習(xí)下吧。2017-12-12
vue基于v-charts封裝雙向條形圖的實現(xiàn)代碼
這篇文章主要介紹了vue基于v-charts封裝雙向條形圖的實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue3之父子組件異步props數(shù)據(jù)的傳值方式
這篇文章主要介紹了Vue3之父子組件異步props數(shù)據(jù)的傳值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
如何修改element-ui日期下拉框datetimePicker的背景色樣式
這篇文章主要介紹了修改element-ui日期下拉框datetimePicker的背景色樣式的操作代碼,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
Element el-table的formatter和scope?template不能同時存在問題解決辦法
本文主要介紹了ElementUI?el-table?的?formatter?和?scope?template?不能同時存在問題解決辦法,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08

