首頁 > 文章 > web前端 > Vue2.0 axios前後端登陸攔截器詳解

Vue2.0 axios前後端登陸攔截器詳解

小云云原創: 2018-01-20 11:21:592280瀏覽

本文主要為大家帶來一篇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前後端登陸攔截器詳解

相關文章