這里我們先說說登陸以及登陸狀態控制需要的插件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('/')            }          }        })