Vue2.0+axios implementiert Login-Interceptor (mit Code)

Nachdem vue auf 2.0 aktualisiert wurde, kündigte der Autor an, dass er vue-resource nicht mehr aktualisieren werde, empfahl jedoch die Verwendung von axios. Vor einiger Zeit habe ich Vue zum ersten Mal in einem Projekt verwendet. Bezüglich des Login-Problems werde ich hier meine Erfahrungen niederschreiben.

Erstes Backend:

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;
  }
}

Die hier durchgeführte Verarbeitung ist: Wenn kein Benutzer in der Sitzung vorhanden ist, wird ein 401-Fehler an das Frontend zurückgegeben.

Frontend:

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)  // 返回接口返回的错误信息
  }
);

Beachten Sie, dass der Interceptor hier in main.js geschrieben ist.

//————————————–Trennlinie————————————–//

Die obige Methode besteht natürlich darin, die Anmeldeseite im Vue-Projekt zu schreiben. Hier ist ein Beispiel für die Verwendung einer unabhängigen Anmeldeseite in Kombination mit dem Vue-Projekt.

Projektverzeichnis:

Static und index.html sind Dinge, die von Webpack gepackt werden.

Die Idee hier sollte mit einem früheren Blog-Beitrag kombiniert werden: Ajax neu schreiben, um Sitzungs-Timeout zu implementieren und zur Anmeldeseite zu springen

Die allgemeine Idee ist: Fordern Sie eine beliebige Seite an. Der Back-End-Interceptor fängt die Anforderung ab und prüft, ob die Benutzerinformationen in der Sitzung vorhanden sind. Wenn sie nicht vorhanden sind, springen Sie zu dieser login.html, falls vorhanden, und antworten Sie normal auf die Daten . Hier müssen wir den Front-End-Interceptor leicht ändern:

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)  // 返回接口返回的错误信息
  }
);

Darunter steht lkdjoifdgjdfgjdfgjfh14546 in einem versteckten Feld auf der Anmeldeseite.

Backend-Interceptor:

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;
  }
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Dinge finden Sie hier. Bitte achten Sie auf PHP-Chinesisch. Andere verwandte Artikel online!

Das obige ist der detaillierte Inhalt vonVue2.0+axios implementiert Login-Interceptor (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!