快捷導(dǎo)航

Vue2.0 axios前后端登陸攔截器(實(shí)例講解)

更新時(shí)間：2017年10月27日 10:17:15 作者：Lovnx

下面小編就為大家?guī)?lái)一篇Vue2.0 axios前后端登陸攔截器(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

vue更新到2.0之后，作者就宣告不再對(duì)vue-resource更新，而是推薦使用axios。前段時(shí)間第一次在項(xiàng)目里用到vue，關(guān)于登陸問(wèn)題，這里寫(xiě)一下心得。

首先后端：

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里面沒(méi)有user了，就向前端返回401錯(cuò)誤。

前端：

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)  // 返回接口返回的錯(cuò)誤信息
  }
);

注意，這里的攔截器寫(xiě)在main.js中。

//———————————–分割線————————————–//

當(dāng)然，以上的這種方式是把登陸頁(yè)面寫(xiě)在了Vue工程里面，下面介紹一種用獨(dú)立的登陸頁(yè)面結(jié)合Vue工程的例子。

工程目錄：

其中的static和index.html是webpack打包后的東西。

這里的思想要結(jié)合以前寫(xiě)的一篇博文： 重寫(xiě)ajax實(shí)現(xiàn)session超時(shí)跳轉(zhuǎn)到登陸頁(yè)面

大概思想就是：請(qǐng)求任何一個(gè)頁(yè)面，后端攔截器攔截到請(qǐng)求，查看session里的用戶信息存在與否，如果不存在就跳轉(zhuǎn)到這個(gè)login.html；如果存在就正常響應(yīng)數(shù)據(jù)。這里要對(duì)前端攔截器稍微改動(dòng)一下：

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 => {
  //這個(gè)判斷是關(guān)鍵，如果返回登陸頁(yè)面內(nèi)容了，就刷新當(dāng)前頁(yè)面，經(jīng)后端處理就會(huì)跳轉(zhuǎn)到登陸頁(yè)面了
  var temp = response.data + "";
      if (temp.indexOf('lkdjoifdgjdfgjdfgjfh14546') > -1) {
        router.go(0);
      }
    return response;
  },
  error => {
    if (error.response) {
      //退出登陸的時(shí)候就響應(yīng)401即可
      if (error.response.status == 401) {
          router.go(0);
      }
    }
    return Promise.reject(error.response.data)  // 返回接口返回的錯(cuò)誤信息
  }
);

其中，lkdjoifdgjdfgjdfgjfh14546這個(gè)是寫(xiě)在登陸頁(yè)面一個(gè)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){
      // 未登錄跳轉(zhuǎn)到login頁(yè)面！");
        response.sendRedirect(contextPath + "/login.html");
      return false;
    }else
      return true;
  }

}

以上這篇Vue2.0 axios前后端登陸攔截器(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: