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打包后的东西。

这里的思想要结合以前写的一篇博文：

大概思想就是：请求任何一个页面，后端拦截器拦截到请求，查看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前后端登陆拦截器(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。