Vue2.0 axios前后端登陆拦截器(实例讲解)


Posted in Javascript onOctober 27, 2017

vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐使用axios。前段时间第一次在项目里用到vue,关于登陆问题,这里写一下心得。

首先后端:

import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;

import com.lovnx.gateway.po.User;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginInterceptor extends HandlerInterceptorAdapter{

  @Override
  public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

    User user = (User)request.getSession().getAttribute("user");
    if(user == null){
    response.sendError(401);
      return false;
    }else
      return true;
  }
}

这里做的处理就是:如果session里面没有user了,就向前端返回401错误。

前端:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App'
import router from './router'
import axios from 'axios'


// http response 拦截器
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response) {
      if (error.response.status == 401) {
          store.commit(types.LOGOUT);
          router.replace({
            path: 'login',
            query: {redirect: router.currentRoute.fullPath}
          })
      }
    }
    return Promise.reject(error.response.data)  // 返回接口返回的错误信息
  }
);

注意,这里的拦截器写在main.js中。

//———————————?分割线————————————?//

当然,以上的这种方式是把登陆页面写在了Vue工程里面,下面介绍一种用独立的登陆页面结合Vue工程的例子。

工程目录:

Vue2.0 axios前后端登陆拦截器(实例讲解)

其中的static和index.html是webpack打包后的东西。

这里的思想要结合以前写的一篇博文: 重写ajax实现session超时跳转到登陆页面

大概思想就是:请求任何一个页面,后端拦截器拦截到请求,查看session里的用户信息存在与否,如果不存在就跳转到这个login.html;如果存在就正常响应数据。这里要对前端拦截器稍微改动一下:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App'
import router from './router'
import axios from 'axios'


// http response 拦截器
axios.interceptors.response.use(
  response => {
  //这个判断是关键,如果返回登陆页面内容了,就刷新当前页面,经后端处理就会跳转到登陆页面了
  var temp = response.data + "";
      if (temp.indexOf('lkdjoifdgjdfgjdfgjfh14546') > -1) {
        router.go(0);
      }
    return response;
  },
  error => {
    if (error.response) {
      //退出登陆的时候就响应401即可
      if (error.response.status == 401) {
          router.go(0);
      }
    }
    return Promise.reject(error.response.data)  // 返回接口返回的错误信息
  }
);

其中,lkdjoifdgjdfgjdfgjfh14546这个是写在登陆页面一个hidden域里面的。

后端拦截器:

import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;

import com.lovnx.gateway.po.User;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginInterceptor extends HandlerInterceptorAdapter{

  @Override
  public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    String requestUri = request.getRequestURI();
    String contextPath = request.getContextPath();

    if (requestUri.indexOf("/login.html") > -1 || requestUri.indexOf("/system/login") > -1) {
      return true;
    }

    User user = (User)request.getSession().getAttribute("user");
    if(user == null){
      // 未登录跳转到login页面!");
        response.sendRedirect(contextPath + "/login.html");
      return false;
    }else
      return true;
  }

}

以上这篇Vue2.0 axios前后端登陆拦截器(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
微信小程序 教程之引用
Oct 18 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
Vue项目中配置pug解析支持
May 10 Javascript
利用原生JS实现data方法示例代码
May 28 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
浅析Javascript中双等号(==)隐性转换机制
Oct 27 #Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 #Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 #Javascript
vue-resource拦截器设置头信息的实例
Oct 27 #Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 #Javascript
vue2里面ref的具体使用方法
Oct 27 #Javascript
初学者AngularJS的环境搭建过程
Oct 27 #Javascript
You might like
新52大事件
2020/03/03 欧美动漫
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php网页病毒清除类
2014/12/08 PHP
JavaScript的目的分析
2007/01/05 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
jQuery图片特效插件Revealing实现拉伸放大
2015/04/22 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
Python爬虫教程知识点总结
2020/10/19 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
软件测试面试题
2014/01/05 面试题
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
学历证明范文
2015/06/16 职场文书
高一语文教学反思
2016/02/16 职场文书