Vue路由之JWT身份认证的实现方法


Posted in Javascript onAugust 26, 2019

一、JWT身份认证简介

JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案,相较于session机制,服务器就不需要保存任何 session 数据了,也就是说,服务器变成无状态了,从而比较容易实现扩展。JWT 实际上是一个令牌(Token),服务器会将一些元数据、指定的secret进行签名并生成token,并返回给客户端,客户端得到这个服务器返回的令牌后,需要将其存储到 Cookie 或 localStorage 中,此后,每次与服务器通信都要带上这个令牌,可以把它放到 Cookie 中自动发送,但这样做不能跨域,所以更好的做法是将其放到 HTTP 请求头 Authorization 字段里面。

二、JWT的使用

① 安装并引入jsonwebtoken模块;
② 对元数据、secret密钥进行签名,并生成对应的token;
③ 对token进行校验是否过期;

const jwt = require("jsonwebtoken"); // 引入jwt
const secret = "this is a private key"; // 指定一个用于生成token的密钥字符串
const token = jwt.sign({ foo: 'bar' }, secret, { // 传入元数据和secret密钥,并指定过期时间生成token
  expiresIn: 5, // 单独一个数字表示多少秒
  // expiresIn: "10h", // 表示10小时后过期
  // expiresIn: "2d" // 表示2天后过期
});
console.log(`token is ${token}`);
setTimeout(() => { // 5秒后对该token进行校验
  jwt.verify(token, secret, (err, decoded) => {
    console.log(err);
    if (err) {
      console.log('token 已经失效了.');
    } else {
      console.log(`token data is ${JSON.stringify(decoded)}`);
    }
  });
}, 5000);

生成的token为一个很长的字符串,分为三部分,每部分由.号隔开,即 头部.载荷.签名,5秒后token校验结果为error,即token已经过期,校验的时候,会得到token的解码数据,主要包括生成token时候的元数据、token的签发时间(iat)、token的过期时间(exp)

// 生成的token字符串为
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmb28iOiJiYXIiLCJpYXQiOjE1NjY3MzE4MzEsImV4cCI6MTU2NjczMTgzNn0.cZZkExNnVqBtnfQN2vtU2Z7JB0PBo1CFyC5NiOywg54
// token decoded后的数据
token data is {"foo":"bar","iat":1566731831,"exp":1566731836}

三、封装axios

由于在使用jwt认证的时候,客户端向服务器发起请求的时候,都要带上token,即要获取到token并将其放到请求头的Authorization字段中,服务器才能从authorization中取出token并进行校验,所以我们必须通过拦截器去实现,在每次请求之前将请求进行拦截,然后添加上token,再继续向服务器发起请求。

import axios from "axios";
class Request {
  constructor() {
    this.baseURL = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '/'; // 设置请求baseURL
    this.timeout = 2000; // 设置请求超时时间
  }
  request(config){// 这里的config是请求的时候传递的参数配置对象,比如url、method、data等
    const instance = axios.create({ // 创建axios实例
      baseURL: this.baseURL,
      timeout: this.timeout,
    });
    // 设置拦截器
    instance.interceptors.request.use((config) => { // 请求拦截之后就是要使用这个config, config表示整个请求对象
      config.headers.Authorization = localStorage.getItem('token'); // 将token从localStorage中取出并添加到请求头的Authorization字段上
      return config; // 返回请求对象,继续向服务器发起请求
    }, err => Promise.reject(err));
    // 设置响应拦截器
    instance.interceptors.response.use(res => res.data, err => Promise.reject(err));
  
    return instance(config);
  }
}
export default new Request();

四、通过路由钩子进行登录校验

我们需要在路由跳转之前,进行登录校验,即校验登录的token是否已经过期,如果token没有失效,则可以继续访问页面;如果token已经失效,那么检查一下所访问的页面是否需要登录才能访问,如果是需要登录后才能访问,那么跳转到登录页面;如果是不需要登录也能访问的页面则继续访问;

const whiteList = ["/"]; // 定义一个白名单列表
router.beforeEach(async (to, from, next) => {
 if (whiteList.includes(to.path)) { // 如果是访问的白名单中的页面
  return next(); // 不需要校验,直接返回继续访问该页面
 }
 const isTokenAvailable = await store.dispatch('validate'); // 校验token是否失效
 if (isTokenAvailable) { // 如果token未失效
  if(to.path === "/login") { // 如果访问的是login页面,则回到首页
   next("/");
  } else { // 如果访问的不是login页面,则继续访问当前要访问的页面
   next();
  }
 } else { // 如果token失效了
  const needLogin = to.matched.some(item => item.meta.needLogin); // 检测要访问的页面是否需要登录才能访问
  if(needLogin) { // 如果访问的页面是需要登录的
   next("/login"); // 跳转到登录页面
  } else { // 如果访问的页面是不需要登录的,则直接继续访问
   next();
  }
 }
});

上面item.meta.needLogin,这个needLogin是在router中进行自定义配置的,在配置路由的时候,允许通过meta属性配置一些自定义的元数据,如下所示:

export default new Router({
 routes: [
  {
   path: '/profile',
   name: 'profile',
   component: Profile,
   meta: {needLogin: true}
  }
 ]
})

五、总结

jwt认证,主要就是Vue路由钩子beforeEach()的应用,以及请求拦截器的封装,在每次路由跳转前进行token认证(校验),检测token是否失效,其校验过程就是向服务器发起一个请求,比如"/validate",由于客户端请求拦截器的作用,会在发起"/validate"请求之前,在请求头的Authorization字段加上token,服务器收到token后就能对token是否有效进行校验了,然后返回token校验结果,客户端再根据token的校验结果进行路由的具体跳转。

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

Javascript 相关文章推荐
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
js面向对象的写法
Feb 19 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
JavaScript常用工具方法封装
Feb 12 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 #Javascript
js实现跟随鼠标移动的小球
Aug 26 #Javascript
vue 源码解析之虚拟Dom-render
Aug 26 #Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 #Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 #Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 #Javascript
JS阻止事件冒泡的方法详解
Aug 26 #Javascript
You might like
PHP中call_user_func_array()函数的用法演示
2012/02/05 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
node.js实现快速截图
2016/08/27 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
JS打印彩色菱形的实例代码
2018/08/15 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
用python写PDF转换器的实现
2020/10/29 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
应聘医药代表职位求职信
2013/10/21 职场文书
质检员的岗位职责
2013/11/15 职场文书
群众路线党课主持词
2014/04/01 职场文书
学校四风对照检查材料
2014/08/28 职场文书
优秀教师先进材料
2014/12/16 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
2015年小学生暑假总结
2015/07/13 职场文书