前言
用户访问网站时,都希望这一次登录完成后,下一次再访问时能够记住其登录的状态,而不是每一次进入都要重新进行登录。因此,本文记录了使用jwt来创建和验证token,以达到记住用户登录状态的过程
- 前端:vue-cli3
- 后端:node.js的express框架
- jwt:jsonwebtoken
主要内容
后端
-
安装jwt
npm install jsonwebtoken
-
封装创建和验证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;
-
在登录接口中创建并返回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}); })
-
新建验证接口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('还没登录呢'); } })
前端
-
封装操作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 };
-
配置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; });
-
在app.vue中发起validate请求,若用户已经登录则跳转到首页,否则跳转 到登录页。
-
登录时,登录成功后接收到token,调用
client/utils/token.js
下的setTokenToCookie
方法,将token存入cookie中。 -
退出登录时,调用
client/utils/token.js
下的clearCookie
方法。
结语
整个大致的步骤就是这样。总结起来就是,前端发起登录请求,登录成功后端创建token并返回;前端将返回的token存储到cookie中,并在每一次请求时将token携带在请求头中,后端拿取请求头中的token进行验证。退出登录时,前端将cookie中的tokne置空。