前言

用户访问网站时，都希望这一次登录完成后，下一次再访问时能够记住其登录的状态，而不是每一次进入都要重新进行登录。因此，本文记录了使用jwt来创建和验证token，以达到记住用户登录状态的过程

• 前端：vue-cli3
• 后端：node.js的express框架
• jwt：jsonwebtoken

主要内容

后端

1. 安装jwt

   npm install jsonwebtoken
   

2. 封装创建和验证token的方法（server/utils/token.js）

   const jwt = require('jsonwebtoken');
   const Token = {
         
     encrypt:function(data,time){
          //data加密数据，time过期时间
       return jwt.sign(data, 'token', {
         expiresIn:time})
     },
     decrypt:function(token){
         
       if (!token) {
         
         return {
         
           token:false
         }
       }
       try {
         
         jwt.verify(token, 'token');
         return {
         
           token:true
         };
       } catch (e) {
         
         return {
         
           token:false,
           data:e
         }
       }
     }
   }
   module.exports = Token;
   

3. 在登录接口中创建并返回token

   const Token = require('./utils/token');
   
   app.post('/user/login', function (req, res) {
         
         const token = Token.encrypt({
         id: req.user_id},'15d'); // 15d，有效期
         res.send({
         success: true, message: '登录成功', data:token});
   })
   

4. 新建验证接口validate（前端可在app.vue中调用此接口进行验证）

   app.get('/validate', function (req, res) {
         
       let data = Token.decrypt(req.headers.token);  //将请求头的token取出解密
       if (data.token) {
         
           res.send('已经登录了');
       }else{
         
         res.send('还没登录呢');
       }
   })
   

前端

1. 封装操作token的方法（client/utils/token.js）

   let setTokenToCookie = (value) => {
         
       var Days = 1; //此 cookie 将被保存 30 天
       var exp = new Date();
       exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
       document.cookie = 'my_token =' + escape(value) + ';expires=' + exp.toGMTString();
   }
   
   let getCookie = (name) => {
         
       var cookieValue = '';
       if (document.cookie && document.cookie !== '') {
         
           var cookies = document.cookie.split(';');
           for (var i = 0; i < cookies.length; i++) {
         
               var cookie = cookies[i].trim();
               if (cookie.substring(0, name.length + 1) === (name + '=')) {
         
                   cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                   break;
               }
           }
       }
       return cookieValue;
   }
   
   let clearCookie = () => {
         
       setTokenToCookie("");
   }
   
   export default {
         
       setTokenToCookie,
       getCookie,
       clearCookie
   };
   

2. 配置axios请求拦截器，在请求头中携带该token（client/service/http.js）

   import Util from '../utils/token'
   
   axios.interceptors.request.use(function (conf) {
         
     const token = Util.getCookie('my_token');
     if (token) conf.headers['token'] = `${
           token}`;
     return conf;
   });
   

3. 在app.vue中发起validate请求，若用户已经登录则跳转到首页，否则跳转 到登录页。

4. 登录时，登录成功后接收到token，调用client/utils/token.js下的setTokenToCookie方法，将token存入cookie中。

5. 退出登录时，调用client/utils/token.js下的clearCookie方法。

结语

整个大致的步骤就是这样。总结起来就是，前端发起登录请求，登录成功后端创建token并返回；前端将返回的token存储到cookie中，并在每一次请求时将token携带在请求头中，后端拿取请求头中的token进行验证。退出登录时，前端将cookie中的tokne置空。