Vue2.0 axios 프런트엔드 및 프런트엔드 로그인 인터셉터에 대한 자세한 설명-JS 튜토리얼-php.cn

Vue2.0 axios 프런트엔드 및 프런트엔드 로그인 인터셉터에 대한 자세한 설명

小云云

풀어 주다： 2018-01-20 11:21:59

원래의

2344명이 탐색했습니다.

이 기사에서는 주로 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;
  }
}

로그인 후 복사

여기서 처리되는 내용은 다음과 같습니다. 세션에 사용자가 없으면 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를 다시 작성하세요.

일반적인 아이디어는 다음과 같습니다. 모든 페이지를 요청하면 백엔드 인터셉터가 요청을 가로채고 사용자를 확인합니다. 세션의 정보가 존재하는지 여부에 관계없이 존재하지 않으면 이 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은 로그인 페이지의 숨겨진 필드에 기록되어 있습니다.

백엔드 인터셉터:

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

}

로그인 후 복사