Vue2.0 axios前后端登陆拦截器(实例讲解)

Vue2.0 axios前后端登陆拦截器(实例讲解)

首先后端：

import org.springframework.web.servlet.handler.HandlerInterceptorAduPkfsapter;

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();

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

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。