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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

위 내용은 Vue2.0+axios는 로그인 인터셉터(코드 포함)를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!