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 相关文章推荐
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
JavaScript数据结构之二叉树的计数算法示例
Apr 13 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
JS实现排行榜文字向上滚动轮播效果
Nov 26 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 Javascript
Vue props中Object和Array设置默认值操作
Jul 30 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数据库的PHP程序
2006/10/09 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
javascript preload&lazy load
2010/05/13 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
深入理解vue中slot与slot-scope的具体使用
2018/01/26 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
Python中的推导式使用详解
2015/06/03 Python
python中单下划线_的常见用法总结
2018/07/10 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
浅谈Python线程的同步互斥与死锁
2020/03/22 Python
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
旅游管理专业个人求职信范文
2013/12/24 职场文书
自主招生专家推荐信
2015/03/26 职场文书
公司晚宴祝酒词
2015/08/11 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
iPhone13再次曝光
2021/04/15 数码科技
Pandas-DataFrame知识点汇总
2022/03/16 Python