vue+egg+jwt实现登录验证的示例代码


Posted in Javascript onMay 18, 2019

原理:vue前端登录,提交账号密码给egg后端,后端比对信息后,使用jsonwebtoken对用户信息进行签名生成token,之后通过cookie返回给vue前端,前端需要使用token里的信息就使用js-base64进行token第二段解码即可。

vue前端路由跳转,进入路由前置守卫检测cookie中的token是否存在,不存在(已过期)则跳转登录,否则继续执行,然后在http拦截器里请求时存在token请求头带上token,后端未得到header则返回错误码,得到则用jsonwebtoken进行验证,是时间错误就从新发放token令牌,否则返回错误码,还要及时更新cookie时间,保证登录态.

vue前端main.js中:

import axios from 'axios';
import cookie from './public/util';
router.beforeEach((to, from, next) => {
 console.log('路由拦截')
 //判断要去的路由有没有requiresAuth
 if (to.meta.requiresAuth) {
  let token = cookie.getCookie('token');
  if (token) {
   next();
  } else {
   next({
    path: '/login'
   });
  }
 } else {
  next(); //如果无需token,那么随它去吧
 }
})
// http request 拦截器
axios.interceptors.request.use(
 config => {
  let token = cookie.getCookie('token');
  console.log(token)
  if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
   config.headers.authorization = `token ${token}`;
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 });
 
// http response 拦截器
axios.interceptors.response.use(
 response => {
  return response;
 },
 error => {
  if (error.response) {
   switch (error.response.status) {
    case 401:
     // 返回 401 清除token信息并跳转到登录页面
     router.replace({
      path: '/login'
     });
   }
  }
  return Promise.reject(error.response.data);  // 返回接口返回的错误信息
 });
Vue.prototype.$http = axios;

其中util.js中我封装了操作cookie的方法

//获取cookie、
function getCookie(name) {
  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if (arr = document.cookie.match(reg))
   return (arr[2]);
  else
   return null;
  }
  
  //设置cookie,增加到vue实例方便全局调用
function setCookie (c_name, value, expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
  };
  
  //删除cookie
function delCookie (name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null)
   document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
  };
  module.exports = {
  getCookie:getCookie,
  setCookie:setCookie,
  delCookie:delCookie
  }

路由中需要登录才能访问的页面,应:

path:'/admin/manager',component:Page,name:'管理系统首页',meta:{requiresAuth:true}

如果需要获取token中的信息则:

let token = cookie.getCookie('token');
let Base64 = require('js-base64').Base64;
let str = token.split('.')[1];
let user = JSON.parse(Base64.decode(str));
console.log(user)

后端在登录逻辑执行完后,需要给前端发放token

let jwt = require('jsonwebtoken');
    let token = jwt.sign({
      user_id:1,
      user_name: '张三'
     }, '自定义签名盐值', {
      expiresIn: '60s' //时间根据自己定,具体可参考jsonwebtoken插件官方说明
     });
this.ctx.cookies.set('token', token, {maxAge:60*1000,httpOnly:false,overwrite:true,signed:false})
this.ctx.body = true;

接着是中间件:

module.exports = () => {
 const jwt = require('jsonwebtoken');
 return async function (ctx, next) {
  if (ctx.request.header['authorization']) {
   let token = ctx.request.header['authorization'].split(' ')[1];
   console.log(token)
   let decoded;
   //解码token
   try {
    decoded = jwt.verify(token, '加签时定义的盐值');
   } catch (error) {
    if (error.name == 'TokenExpiredError') {
     console.log('时间到期')
     //重新发放令牌
     token = jwt.sign({
      user_id: 1,
      user_name: '张三'
     }, 'sinner77', {
      expiresIn: '60s' //过期时间设置为60妙。那么decode这个token的时候得到的过期时间为 : 创建token的时间 + 设置的值
     });
     ctx.cookies.set('token', token, {
      maxAge: 60 * 1000,
      httpOnly: false,
      overwrite: true,
      signed: false
     });
    } else {
     ctx.status = 401;
     ctx.body = {
      message: 'token失效'
     }
     return;
    }
   }
   //重置cookie时间
   ctx.cookies.set('token', token, {
    maxAge: 60 * 1000,
    httpOnly: false,
    overwrite: true,
    signed: false
   });
   await next();
  } else {
   ctx.status = 401;
   ctx.body = {
    message: '没有token'
   }
   return;
  }
 }
};

最后在需要登录才可访问的资源路由上使用该中间件,如:

const checktoken = app.middleware.checktoken();
 router.get('/test',checktoken,controller.util.test);

至此,以cookie维护登录态,token做登录权限验证就完成了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
Jquery插件分享之气泡形提示控件grumble.js
May 20 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
如何编写高质量JS代码
Dec 28 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
Vue计算属性的使用
Aug 04 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 #Javascript
inquirer.js一个用户与命令行交互的工具详解
May 18 #Javascript
webpack 代码分离优化快速指北
May 18 #Javascript
如何实现小程序tab栏下划线动画效果
May 18 #Javascript
微信小程序结合Storage实现搜索历史效果
May 18 #Javascript
Fetch超时设置与终止请求详解
May 18 #Javascript
微信小程序实现搜索历史功能
Mar 26 #Javascript
You might like
PHP实现页面静态化的超简单方法
2016/09/06 PHP
PHP进程通信基础之信号
2017/02/19 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
Javascript !!的作用
2008/12/04 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
设置python3为默认python的方法
2018/10/31 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Python实现不规则图形填充的思路
2020/02/02 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
python+excel接口自动化获取token并作为请求参数进行传参操作
2020/11/10 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
Html5之title吸顶功能
2018/06/04 HTML / CSS
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
写自荐信要注意什么
2013/12/26 职场文书
2013年军训通讯稿
2014/02/05 职场文书
父母寄语大全
2014/04/12 职场文书
入党函调证明材料
2014/12/24 职场文书
党员争先创优承诺书
2015/01/20 职场文书
初中物理教学反思
2016/02/19 职场文书
高二英语教学反思
2016/03/03 职场文书
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
Oracle配置dblink访问PostgreSQL的操作方法
2022/03/21 PostgreSQL
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript