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_03(ExtJs Grid的简单使用)
Oct 02 Javascript
js Event对象的5种坐标
Sep 12 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
Javascript操作select控件代码实例
Feb 14 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实现图象锐化代码
2007/06/14 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
Python 可爱的大小写
2008/09/06 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python 实现单通道转3通道
2019/12/03 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
中职生自荐信
2013/10/13 职场文书
护理职业生涯规划书
2014/01/24 职场文书
事务机电主管工作职责
2014/02/25 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
朋友聚会开场白
2015/06/01 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android