ホームページ >ウェブフロントエンド >jsチュートリアル >Vue2.0 axios フロントエンドおよびバックエンドのログインインターセプター

Vue2.0 axios フロントエンドおよびバックエンドのログインインターセプター

小云云オリジナル: 2018-01-02 09:29:292058ブラウズ

vue が 2.0 に更新された後、作者は vue-resource を更新しないことを発表しましたが、axios の使用を推奨しました。少し前に、初めてプロジェクトで vue を使用したときのログインの問題について、私の経験をここに書き留めておきます。この記事では主に、Vue2.0 axios フロントエンドおよびバックエンドのログインインターセプターについて説明します (例を示した説明)。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

まず第一に、バックエンド:

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

}

Vue2.0 axios フロントエンドおよびバックエンドのログイン インターセプター

関連記事

Vue2.0 axios フロントエンドおよびバックエンドのログインインターセプター