koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷
這里我們先說(shuō)說(shuō)登陸以及登陸狀態(tài)控制需要的插件jsonwebtoken,jsonwebtoken
就可以實(shí)現(xiàn)token的生成與反向解密出用戶數(shù)據(jù)。
安裝步驟: npm install jsonwebtoken --save
安裝之后先創(chuàng)建一個(gè)token.js, 為了項(xiàng)目目錄的清晰,可以創(chuàng)建一個(gè)token文件夾,將token.js放到里面。文件創(chuàng)建OK之后,該是寫內(nèi)容了,寫內(nèi)容之前先說(shuō)說(shuō)jsonwebtoken提供的方法:
1、sign: 生成token、2、decod: 解析token。 這兩個(gè)方法就是我們常用的加密和解密用的方法。
token.js 我們先定義兩個(gè)方法addtoken(生成token)、decrypt(解析前臺(tái)傳遞的token), 這里直接上代碼
token.js內(nèi)容:
const jwt = require('jsonwebtoken'); const serect = 'token'; //生成token所需要的密鑰 let token = { addToken: (userInfo) => { const token = jwt.sign({ //這個(gè)函數(shù)需要三個(gè)參數(shù), 第一個(gè)一般是登陸用戶的名字, 第二個(gè)就是上面定義的密鑰,第三個(gè)是過(guò)期時(shí)間 單位是s ,不過(guò)還可以寫 {expiresIn:'2h'}(代表2小時(shí)) user: userInfo.user, id: userInfo.id }, serect, {expiresIn: 1}); return token; }, decrypt: (token) => { if (token) { let toke = tokens.split(' ')[1]; // 解析 let decoded = jwt.decode(toke, serect); //解析token需要兩個(gè)參數(shù),密鑰 以及 前臺(tái)傳遞的token return decoded; } } } exports = module.exports = token;
然后修改登陸接口, 登陸之后要將生成的token傳遞給前臺(tái), 直接看代碼:
const addToken = require('../token/token') router.post('/login',async (ctx)=> { let username = ctx.request.body.username; let password = ctx.request.body.password await userModel.selectUser([username]).then(async res => { if (res.length === 0) { ctx.body = { code: 102, message: '對(duì)不起賬號(hào)不存在' } } else { if (await md5.MD5(password,res[0].solt) === res[0].password) { const token = addToken.addToken({user: res[0].name, id: res[0].id}) //主要是這里 生成token ctx.body = { code: 100, message: '登陸成功', token } } else { ctx.body = { code: 101, message: '對(duì)不起密碼錯(cuò)誤' } } } }) })
后臺(tái)傳遞的token值,前臺(tái)需要保存,我們使用的vue所以可以使用vuex將收到的token保存起來(lái)(這里提示vuex當(dāng)頁(yè)面刷新里面的數(shù)據(jù)會(huì)清除,所以建議保存在localStorage里面當(dāng)然也可以使用vuex-along
這個(gè)組件,這個(gè)組件其實(shí)就是幫我們把vuex的數(shù)據(jù)再保存在loaclStorage里面)
axios.post('/api/login', user).then(({status, data}) => { if (status === 200) { if (data.code === 102) { alert('對(duì)不起賬號(hào)不存在') } else if (data.code === 101) { alert('對(duì)不起密碼不正確') } else if (data.code === 100) { alert('登陸成功') console.log(data) this.$store.dispatch('tokenAddFun', data.token) this.$store.dispatch('userAddFun', user.username) this.$router.push('/') } } })
然后在每次請(qǐng)求的時(shí)候?qū)oken添加在請(qǐng)求的頭信息中: 我們使用的是axios,所以可以使用axios的請(qǐng)求攔截器,修改其頭頭信息,這樣就不用在每個(gè)請(qǐng)求中添加。添加axios目錄然后添加axios.js文件,內(nèi)容如下:
import axios from 'axios' import store from '../store' axios.interceptors.request.use( config => { config.headers.common['Authorization'] = 'Bearer '+ store.state.token; return config } ) export default axios
需要請(qǐng)求的時(shí)候 導(dǎo)入自己寫的這個(gè)js文件(導(dǎo)入自己寫的這個(gè)文件之后就不需要導(dǎo)入 axios插件了)測(cè)試請(qǐng)求代碼如下:
import axios from '../../../axios/axios' axios.get('/api/userlist').then(({status, data}) => { if (status === 200) { if (data.code !== 100) { alert('對(duì)不起,session過(guò)期,請(qǐng)重新登陸'); this.$router.push('/login') } else { this.showData() } } })
后臺(tái)koa2接收到請(qǐng)求之后先對(duì)請(qǐng)求頭攜帶token進(jìn)行解析,然后對(duì)比是否過(guò)期,具體代碼如下:
const token = require('../token/addtoken') router.get('/userlist', async (ctx, next) => { let webToken = ctx.request.header.authorization; //獲取頭部信息攜帶的token if (webToken){ // 獲取到token let res = token.decrypt(webToken); //解析token if (res && res.exp <= new Date()/1000){ //進(jìn)行時(shí)間對(duì)比 ctx.body = { message: 'token過(guò)期', code:102 }; } else { ctx.body = { message: '解析成功', code:100 } } } else{ // 沒(méi)有取到token ctx.body = { msg:'沒(méi)有token', code: 101 } } })
后臺(tái)通過(guò)上述的方法,將數(shù)據(jù)以及登陸狀態(tài)傳遞給前臺(tái),前臺(tái)進(jìn)行邏輯判斷 就可以實(shí)現(xiàn)登陸狀態(tài)的判斷
總結(jié)
以上所述是小編給大家介紹的koa2+vue實(shí)現(xiàn)登陸及登錄狀態(tài)判斷,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝
相關(guān)文章
Vue.use與Vue.prototype的區(qū)別及說(shuō)明
這篇文章主要介紹了Vue.use與Vue.prototype的區(qū)別及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12Vue3+Canvas實(shí)現(xiàn)簡(jiǎn)易的貪吃蛇游戲
貪吃蛇作為一個(gè)經(jīng)典的小游戲,是很多人兒時(shí)的記憶,當(dāng)時(shí)的掌機(jī)、諾基亞手機(jī)里面都有它的身影。本文將用Vue3?Canvas來(lái)復(fù)刻一下這款游戲,感興趣的可以了解一下2022-07-07vue3 學(xué)習(xí)筆記之a(chǎn)xios的使用變化總結(jié)
本篇文章主要旨在幫助正在學(xué)vue3或者準(zhǔn)備學(xué)vue3的同學(xué)了解網(wǎng)絡(luò)請(qǐng)求axios該如何使用,防止接觸了一點(diǎn)點(diǎn)vue3的同學(xué)會(huì)有個(gè)疑問(wèn)。有興趣的小伙伴可以關(guān)注一下2021-11-11Vue.prototype全局變量的實(shí)現(xiàn)示例
在Vue中可以使用Vue.prototype向Vue的全局作用域添加屬性或方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06關(guān)于Element上傳組件beforeUpload上傳前限制失效問(wèn)題
這篇文章主要介紹了Element上傳組件beforeUpload上傳前限制失效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03Vue3處理大數(shù)據(jù)量渲染和優(yōu)化的方法小結(jié)
在現(xiàn)代Web應(yīng)用中,隨著用戶數(shù)據(jù)和交互的復(fù)雜性增加,如何高效地處理大數(shù)據(jù)量渲染成為了前端開(kāi)發(fā)的重要環(huán)節(jié),本文將以Vue 3為例,探討如何優(yōu)化大數(shù)據(jù)量渲染,提升應(yīng)用性能,需要的朋友可以參考下2024-07-07