Vue-jwt時效延長問題

Vue-jwt時效延長問題

jwt(json web token)

• 須要安裝依賴 body-parser(解析請求body),jsonwebtoken(建立token)

咱們的思路是，登錄頁面寫死一個admin帳號登錄，服務端會給它發送一個token,而後經過客戶端每次請求攜帶token讓服務端去校驗。
咱們先用express 寫一個接口

let secret = 'qc'
app.post('/login', (req, res) => {
  let {
    username
  } = req.body; //請求體放body
  if (username == 'admin') {
    res.json({
      code: 0,
      username: 'admin',
      //生成token jwt.sign(生成的東西，祕鑰，{設置})，發給客戶端，客戶端存下來，每次請求的時候帶上，服務端每次看下是否帶上token並校驗token 
      token: jwt.sign({
        username: 'admin'
      }, secret, {
        expiresIn: 1000 //token失效時間
      })
    })
  } else {
    res.json({
      code: 1,
      data: '用戶名不存在'
    })
  }
})

這個接口就完成一個校驗你登錄輸入的時候admin而後給你返回用戶名和token
客戶端接收到token，存儲到localstorage，而後在axios攔截器裏把每次請求都帶上.

instance.interceptors.request.use((config)=>{ 
      //更改請求頭 通常加token
      config.headers.Authorization=getlocal('token')
      return config
    }),

這樣咱們每次請求接口的時候都會帶上token了，接下來咱們在服務端在寫一個校驗token接口

let jwt = require('jsonwebtoken')
app.get('/validata', (req, res) => {
  let token =req.headers.authorization; //請求頭裏面取出token
  jwt.verify(token, secret, (err, decode) => {//jxt.verify方法，參數分別爲（token，本身設置的祕鑰，執行結果 放在decode當中。
    if (err) {
      return res.json({
        code: 1,
        data: 'token失效了'
      })
    } else {
      //若是校驗經過，則在給客戶端發送一個新token，以此達到token時效延長。
      res.json({
        //須要把token的時效延長
        username: decode.username,
        code: 0,
        token: jwt.sign({
          username: 'admin'
        }, secret, {
          expiresIn: 20
        })
      })
    }
  }) //decode 等於本身設置的username:admin
})

而後咱們經過客戶端的切換路由來調取這個方法，達到用戶只要在操做切換頁面就認爲在線，讓token不失效
另外須要每一個組件都有這個方法的話，咱們須要放在vuex中。

//在vuex中action配置。
actions: {
      async validata({commit}){
          let res = await validata()
          console.log(res);
          if(res.code==0 ){
            commit('setUser',res.username)
            setlocal('token',res.token)
          }
          return res.code==0
      }
  }

  //經過路由beforeEach達到全局路由監聽。    
router.beforeEach(async (to,from,next)=>{
   let islogin =await store.dispatch('validata') 
   
})

總結:客戶首次登陸，服務端給客戶端返回一個token，客戶端每次請求都攜帶這個token，當用戶去切換路由的時候，每次都去調用服務端的一個校驗接口，校驗成功的就一直給它延長token時間。