koa2+vue實現登陸以及是否登陸控制
- 2019 年 10 月 3 日
- 筆記
這裡我們先說說登陸以及登陸狀態控制需要的插件jsonwebtoken,jsonwebtoken就可以實現token的生成與反向解密出用戶數據。安裝步驟: npm install jsonwebtoken --save
安裝之後先創建一個token.js, 為了項目目錄的清晰，可以創建一個token文件夾,將token.js放到裡面。文件創建OK之後,該是寫內容了,寫內容之前先說說jsonwebtoken提供的方法:
1、sign： 生成token、2、decod: 解析token。 這兩個方法就是我們常用的加密和解密用的方法。
token.js 我們先定義兩個方法addtoken(生成token)、decrypt(解析前台傳遞的token), 這裡直接上程式碼
token.js內容:
const jwt = require('jsonwebtoken'); const serect = 'token'; //生成token所需要的密鑰 let token = { addToken: (userInfo) => { const token = jwt.sign({ //這個函數需要三個參數, 第一個一般是登陸用戶的名字, 第二個就是上面定義的密鑰,第三個是過期時間 單位是s ,不過還可以寫 {expiresIn:'2h'}(代表2小時) 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需要兩個參數,密鑰 以及 前台傳遞的token return decoded; } } } exports = module.exports = token; 然後修改登陸介面, 登陸之後要將生成的token傳遞給前台, 直接看程式碼:
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: '對不起帳號不存在' } } 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: '對不起密碼錯誤' } } } }) }) 後台傳遞的token值,前台需要保存,我們使用的vue所以可以使用vuex將收到的token保存起來(這裡提示vuex當頁面刷新裡面的數據會清除,所以建議保存在localStorage裡面當然也可以使用vuex-along 這個組件,這個組件其實就是幫我們把vuex的數據再保存在loaclStorage裡面)
axios.post('/api/login', user).then(({status, data}) => { if (status === 200) { if (data.code === 102) { alert('對不起帳號不存在') } else if (data.code === 101) { alert('對不起密碼不正確') } else if (data.code === 100) { alert('登陸成功') console.log(data) this.$store.dispatch('tokenAddFun', data.token) this.$store.dispatch('userAddFun', user.username) this.$router.push('/') } } }) 然後在每次請求的時候將token添加在請求的頭資訊中: 我們使用的是axios，所以可以使用axios的請求攔截器,修改其頭頭資訊，這樣就不用在每個請求中添加。添加axios目錄然後添加axios.js文件，內容如下:
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
需要請求的時候 導入自己寫的這個js文件(導入自己寫的這個文件之後就不需要導入 axios插件了)測試請求程式碼如下:
import axios from '../../../axios/axios'
axios.get('/api/userlist').then(({status, data}) => { if (status === 200) { if (data.code !== 100) { alert('對不起,session過期,請重新登陸'); this.$router.push('/login') } else { this.showData() } } })
後台koa2接收到請求之後先對請求頭攜帶token進行解析,然後對比是否過期,具體程式碼如下:
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){ //進行時間對比 ctx.body = { message: 'token過期', code:102 }; } else { ctx.body = { message: '解析成功', code:100 } } } else{ // 沒有取到token ctx.body = { msg:'沒有token', code: 101 } } }) 後台通過上述的方法,將數據以及登陸狀態傳遞給前台,前台進行邏輯判斷 就可以實現登陸狀態的判斷
以上是自己實現登陸狀態判斷的一個小例子,如果有不正確的地方,麻煩留言提醒，謝謝