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 相关文章推荐
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
Aug 10 Javascript
JavaScript实现登录窗体
Jun 22 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
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
Python中标准模块importlib详解
2017/04/16 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
python实现人民币大写转换
2018/06/20 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
买房子个人收入证明
2014/01/16 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
销售代理协议书
2014/09/30 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
2015入党自传格式范文
2015/06/26 职场文书
庆七一主持词
2015/06/29 职场文书