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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
JS处理VBArray的函数使用说明
May 11 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
javascript与有限状态机详解
May 08 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
vue component组件使用方法详解
Jul 14 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 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
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
改变Apache端口等配置修改方法
2008/06/05 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
javascript数组的扩展实现代码集合
2008/06/01 Javascript
extjs form textfield的隐藏方法
2008/12/29 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
js实现网页随机验证码
2020/10/19 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Python3 Random模块代码详解
2017/12/04 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
基于python实现简单日历
2018/07/28 Python
python的继承知识点总结
2018/12/10 Python
python实现图像拼接功能
2020/03/23 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
本科毕业生自我鉴定
2013/11/02 职场文书
大学在校生求职信范文
2013/11/21 职场文书
财务会计应届生求职信
2013/11/24 职场文书
委托书范本
2014/04/02 职场文书
创业女性典型材料
2014/05/02 职场文书
根叔历年演讲稿
2014/05/20 职场文书
档案工作汇报材料
2014/08/21 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
python基础学习之生成器与文件系统知识总结
2021/05/25 Python