koa2+vue實現登陸以及是否登陸控制

Web濤濤發表於2019-08-15
Vue

     這裡我們先說說登陸以及登陸狀態控制需要的外掛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
    }
  }
})

 後臺通過上述的方法,將資料以及登陸狀態傳遞給前臺,前臺進行邏輯判斷 就可以實現登陸狀態的判斷

以上是自己實現登陸狀態判斷的一個小例子,如果有不正確的地方,麻煩留言提醒，謝謝

相關文章