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 相关文章推荐
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
jquery 删除cookie失效的解决方法
Nov 12 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
浅析Vue实例以及生命周期
Aug 14 Javascript
JavaScript实现随机点名器
Mar 25 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数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
js实现楼层导航功能
2017/02/23 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
跟老齐学Python之用Python计算
2014/09/12 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
简单理解Python中的装饰器
2015/07/31 Python
python实现解数独程序代码
2017/04/12 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
python实现Virginia无密钥解密
2019/03/20 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
python3.4中清屏的处理方法
2020/07/06 Python
HTML文本属性&颜色控制属性的实现
2019/12/17 HTML / CSS
母亲节感恩寄语
2014/02/21 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android
Python简易开发之制作计算器
2022/04/28 Python