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时间。