koa2+vue如何實(shí)現(xiàn)登錄及登錄狀態(tài)判斷

小編給大家分享一下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
  }
 }
})

看完了這篇文章，相信你對(duì)“koa2+vue如何實(shí)現(xiàn)登錄及登錄狀態(tài)判斷”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！