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

來源：懂視網責編：小采時間：2020-11-27 22:26:44

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

Vue2.0 axios前后端登陸攔截器(實例講解):vue更新到2.0之后，作者就宣告不再對vue-resource更新，而是推薦使用axios。前段時間第一次在項目里用到vue，關于登陸問題，這里寫一下心得。首先后端： import org.springframework.web.servlet.handler.HandlerIntercepto

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue2.0 axios前后端登陸攔截器(實例講解):vue更新到2.0之后，作者就宣告不再對vue-resource更新，而是推薦使用axios。前段時間第一次在項目里用到vue，關于登陸問題，這里寫一下心得。首先后端： import org.springframework.web.servlet.handler.HandlerIntercepto

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

這里做的處理就是：如果session里面沒有user了，就向前端返回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實現session超時跳轉到登陸頁面

大概思想就是：請求任何一個頁面，后端攔截器攔截到請求，查看session里的用戶信息存在與否，如果不存在就跳轉到這個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這個是寫在登陸頁面一個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){
 // 未登錄跳轉到login頁面！");
 response.sendRedirect(contextPath + "/login.html");
 return false;
 }else
 return true;
 }

}

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

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

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 登陸 2.0

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦