基于vue 实现token验证的实例代码


Posted in Javascript onDecember 14, 2017

vue-koa2-token

基于vue的 做了token验证

前端部分(对axios设置Authorization)

import axios from 'axios'
import store from '../store'
import router from '../router'
//设置全局axios默认值
axios.defaults.timeout = 6000; //6000的超时验证
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
//创建一个axios实例
const instance = axios.create();
instance.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
axios.interceptors.request.use = instance.interceptors.request.use;
//request拦截器
instance.interceptors.request.use(
  config => {
    //每次发送请求之前检测都vuex存有token,那么都要放在请求头发送给服务器
    if(store.state.token){
      config.headers.Authorization = `token ${store.state.token}`;
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);
//respone拦截器
instance.interceptors.response.use(
  response => {
    return response;
  },
  error => { //默认除了2XX之外的都是错误的,就会走这里
    if(error.response){
      switch(error.response.status){
        case 401:
          store.dispatch('UserLogout'); //可能是token过期,清除它
          router.replace({ //跳转到登录页面
            path: 'login',
            query: { redirect: router.currentRoute.fullPath } // 将跳转的路由path作为参数,登录成功后跳转到该路由
          });
      }
    }
    return Promise.reject(error.response);
  }
);
export default instance;

 然后在路由文件中

//注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
 //获取store里面的token
 let token = store.state.token;
 //判断要去的路由有没有requiresAuth
 if(to.meta.requiresAuth){
  if(token){
   next();
  }else{
   next({
    path: '/login',
    query: { redirect: to.fullPath } // 将刚刚要去的路由path(却无权限)作为参数,方便登录成功后直接跳转到该路由
   });
  }
 }else{
  next();//如果无需token,那么随它去吧
 }
});

后端(node) 我们封装了一个中间件 在需要验证token的路由,加上这个中间件

router.get('/dosh',checkToken,User.dosh)
const jwt = require('jsonwebtoken');

1、使用jsonwebtoken 创建token

const jwt = require('jsonwebtoken');
//登录时:核对用户名和密码成功后,应用将用户的id(图中的user_id)作为JWT Payload的一个属性
module.exports = function(user_id){
  const token = jwt.sign({
    user_id: user_id
  }, 'sinner77', {
    expiresIn: '3600s' //过期时间设置为60妙。那么decode这个token的时候得到的过期时间为 : 创建token的时间 + 设置的值
  });
  return token;
};

2、对于前端的请求,校验接口

//检查token是否过期
module.exports = async ( ctx, next ) => {
  if(ctx.request.header['authorization']){
    let token = ctx.request.header['authorization'].split(' ')[1];
    //解码token
    let decoded = jwt.decode(token, 'sinner77');
    //console.log(decoded);的输出 :{ user_id: '123123123', iat: 1494405235, exp: 1494405235 }
    if(token && decoded.exp <= new Date()/1000){
      ctx.status = 401;
      ctx.body = {
        message: 'token过期'
      };
    }else{
      //如果权限没问题,那么交个下一个控制器处理
      return next();
    }
  }else{
    ctx.status = 401;
    ctx.body = {
      message: '没有token'
    }
  }
};

代码托管github 欢迎star

https://github.com/yxl720/vue-koa2-token

总结

以上所述是小编给大家介绍的基于vue 实现token验证的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery textarea的长度进行验证
May 06 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
JavaScript实现左侧菜单效果
Dec 14 #Javascript
JavaScript实现全选取消效果
Dec 14 #Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 #Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 #Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 #Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 #Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 #Javascript
You might like
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
js 文件引入实现代码
2010/04/23 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python request使用方法及问题总结
2020/04/26 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
护士实习自我鉴定
2013/10/22 职场文书
专业销售业务员求职信
2013/11/18 职场文书
入党自我评价优缺点
2014/01/25 职场文书
让生命充满爱观后感
2015/06/08 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python