脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → axios前后端登陆拦截器

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

 更新时间：2017年10月27日 10:17:15   作者：Lovnx  
下面小编就为大家带来一篇Vue2.0 axios前后端登陆拦截器(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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工程的例子。

工程目录：

其中的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前后端登陆拦截器(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vuex存储数据的几种方法实例详解

    vuex存储数据的几种方法实例详解

    在浏览网页时我们有些时候需要记住一些用户选择的信息,比如登陆时我们如果选择了记住密码,那么我们下次进入该网页时就会有你上次的登陆信息,下面这篇文章主要给大家介绍了关于vuex存储数据的几种方法,需要的朋友可以参考下
    2022-10-10
  • Vue press 支持图片放大功能的实例代码

    Vue press 支持图片放大功能的实例代码

    这篇文章主要介绍了 Vue press 支持图片放大功能,本文通过代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-11-11
  • vue动态绑定background的方法

    vue动态绑定background的方法

    background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • Vue中添加滚动事件设置的方法详解

    Vue中添加滚动事件设置的方法详解

    这篇文章主要给大家介绍了关于Vue中添加滚动事件设置的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue中返回结果是promise的处理方式

    vue中返回结果是promise的处理方式

    这篇文章主要介绍了vue中返回结果是promise的处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue实现移动端图片裁剪上传功能

    vue实现移动端图片裁剪上传功能

    这篇文章主要为大家详细介绍了vue实现移动端图片裁剪上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location

    解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navig

    这篇文章主要给大家介绍了关于解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location的相关资料,这是最近做项目时候遇到的一个问题,现将解决办法分享出来,需要的朋友可以参考下
    2023-01-01
  • vue之bus总线简单使用讲解

    vue之bus总线简单使用讲解

    这篇文章主要介绍了vue之bus总线简单使用讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • 详解vue mixins和extends的巧妙用法

    详解vue mixins和extends的巧妙用法

    vue提供了mixins、extends配置项，最近使用中发现很好用。下面小编通过本文给大家介绍下vue中 mixins和extends的巧妙用法，需要的朋友参考下吧
    2017-12-12
  • vite.config.js或者vue.config.js配置方式

    vite.config.js或者vue.config.js配置方式

    这篇文章主要介绍了vite.config.js或者vue.config.js配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论