vue-resource请求实现http登录拦截或者路由拦截的方法


Posted in Javascript onJuly 11, 2018

本文介绍了vue-resource请求实现http登录拦截或者路由拦截的方法,分享给大家,具体如下:

项目需求

  • 项目是前后台分离,前端负责数据对接,以及业务逻辑的处理,后台只需要给相应的接口即可
  • 后台会控制接口的授权情况(即,未登录的接口,统一返回401未授权状态码,前端根据vue-resource的拦截器拦截符合条件的状态,并做出相应的处理。)
  • 以下为两个系统的登录页面,作为请求超时或者登录拦截的跳转页面

vue-resource请求实现http登录拦截或者路由拦截的方法

以上是登录超时,登录弹窗框自动弹出来

代码片段

路由文件

export default [
 {
  name: 'root',
  path: '',
  component: function (resolve) {
   require(['你的vue文件路径地址'], resolve);
  },
  children: [
    {
      name: 'applicationLayout',
      path: '/app/applicationLayout/:appId',
      component: function (resolve) {
       require(['你的vue文件路径地址'], resolve);
      },
      meta: {
       requireAuth: true,    // 需要登录才能进入的页面可以增加一个meta属性
      }
    }
  ] 
]

main.js 入口文件中加入以下代码

const UNAUTHORIZED_CODE = 401;

router.beforeEach((to, from, next) => {
 if (to.meta.requireAuth) {
  if (storage.get('platformUser')) {
   store.dispatch('loginUser', JSON.parse(storage.get('platformUser')));    //将用户信息存储到vuex中,供全局使用
   next();
  } else {
   store.dispatch('initLoginModal', {state: true});     //显示登录弹窗
   next();
  }
 } else {
  next();
 }
});

//拦截http请求中返回401状态码,并针对其显示登录弹窗
Vue.http.interceptors.push((request, next) => {
 next((response) => {
  if (response.body.status === UNAUTHORIZED_CODE) { //与后台约定登录失效的返回码
   store.dispatch('initLoginModal', {state: true});        //显示登录弹窗
   store.dispatch('removeUser');                      //移出浏览器中存储的用户信息
  }
  return response;
 });
});

以上便能实现登录之前针对某些特定路由的拦截,和后台接口授权失效时前端业务逻辑操作处理, 整篇文章仅作知识点积累,如有不妥之处,请多多包涵。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初学JavaScript第二章
Sep 30 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
Javascript中With语句用法实例
May 14 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 #Javascript
Vue.js实现的计算器功能完整示例
Jul 11 #Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 #Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 #Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 #Javascript
JS实现动态生成html table表格的方法分析
Jul 11 #Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 #Javascript
You might like
php 小乘法表实现代码
2009/07/16 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
PHP实现货币换算的方法
2014/11/29 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
浅谈Django REST Framework限速
2017/12/12 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Python Gitlab Api 使用方法
2019/08/28 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
python上selenium的弹框操作实现
2020/07/13 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
nohup的用法
2012/11/26 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
学习张林森心得体会
2014/09/10 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis