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 相关文章推荐
javascript 函数调用规则
Aug 26 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
浅析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
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP个人网站架设连环讲(四)
2006/10/09 PHP
php 表单验证实现代码
2009/03/10 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
python使用正则表达式替换匹配成功的组
2017/11/17 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python画图的函数用法以及技巧
2019/06/28 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
HTML5应用之文件上传
2016/12/30 HTML / CSS
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
PHP面试题集
2016/12/18 面试题
商场主管竞聘书
2014/03/31 职场文书
理想演讲稿范文
2014/05/21 职场文书
商业街策划方案
2014/05/31 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
清明节寄语2015
2015/03/23 职场文书
法人身份证明书
2015/06/18 职场文书
个人合作协议范本
2015/08/06 职场文书
关于军训的感想
2015/08/07 职场文书
校长新学期寄语2016
2015/12/04 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python