基于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 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
js随机生成网页背景颜色的方法
Feb 26 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
vue实现拖拽交换位置
Apr 07 Vue.js
前端canvas中物体边框和控制点的实现示例
Aug 05 Javascript
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
分享PHP入门的学习方法
2007/01/02 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP使用函数用法详解
2018/09/30 PHP
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
js闭包的用途详解
2014/11/09 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
JS实现倒计时图文效果
2018/11/17 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
python统计一个文本中重复行数的方法
2014/11/19 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
python类的实例化问题解决
2019/08/31 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
门卫岗位安全职责
2013/12/13 职场文书
企业内控岗位的职责
2014/02/07 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript
Django中celery的使用项目实例
2022/07/07 Python