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