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

　　

vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐使用axios。前段时间第一次在项目里用到vue,关于登陆问题,这里写一下心得。

　　

　　 　　 　　进口org.springframework.web.servlet.handler.HandlerInterceptorAdapter; 　　 　　进口com.lovnx.gateway.po.User; 　　 　　进口javax.servlet.http.HttpServletRequest; 　　进口javax.servlet.http.HttpServletResponse; 　　 　　公开课LoginInterceptor延伸HandlerInterceptorAdapter { 　　 　　@Override 　　公共布尔preHandle (HttpServletRequest请求,HttpServletResponse响应对象处理程序){抛出异常 　　 　　用户用户=(用户)request.getSession () .getAttribute(“用户”); 　　如果(用户==null) { 　　response.sendError (401); 　　返回错误; 　　其他} 　　返回true; 　　} 　　} 　　 　　

这里做的处理就是:如果会话里面没有用户了,就向前端返回401错误。

　　

　　 　　 　　从“Vue”进口Vue 　　从“element-ui”进口ElementUI 　　导入“element-ui/lib/theme-default/index.css” 　　导入应用程序从“/App。” 　　从“进口路由器。/路由器的 　　从“axios”进口axios//http响应拦截器 　　axios.interceptors.response.use ( 　　响应=比;{ 　　返回响应; 　　}, 　　错误=比;{ 　　如果(error.response) { 　　如果(error.response。状态==401){ 　　store.commit (types.LOGOUT); 　　router.replace ({ 　　路径:“登录”, 　　查询:{重定向:router.currentRoute.fullPath} 　　}) 　　} 　　} 　　返回Promise.reject (error.response.data)//返回接口返回的错误信息 　　} 　　); 　　 　　

注意,这里的拦截器写在main.js中。

　　

//- - - - - - - - - - - -分割线- - - - - - - - - - - - -//

　　

当然,以上的这种方式是把登陆页面写在了Vue工程里面,下面介绍一种用独立的登陆页面结合Vue工程的例子。

　　

<>强工程目录:

　　

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

　　

其中的静态和index . html是webpack打包后的东西。

　　

这里的思想要结合以前写的一篇博文:<强>重写ajax实现会话超时跳转到登陆页面

　　

大概思想就是:请求任何一个页面,后端拦截器拦截到请求,查看会话里的用户信息存在与否,如果不存在就跳转到这个登录。html,如果存在就正常响应数据。这里要对前端拦截器稍微改动一下:
　　

　　 　　 　　从“Vue”进口Vue 　　从“element-ui”进口ElementUI 　　导入“element-ui/lib/theme-default/index.css” 　　导入应用程序从“/App。” 　　从“进口路由器。/路由器的 　　从“axios”进口axios//http响应拦截器 　　axios.interceptors.response.use ( 　　响应=比;{//这个判断是关键,如果返回登陆页面内容了,就刷新当前页面,经后端处理就会跳转到登陆页面了 　　var temp=响应。数据+ "; 　　如果(temp.indexOf (lkdjoifdgjdfgjdfgjfh24546)比;1){ 　　router.go (0); 　　} 　　返回响应; 　　}, 　　错误=比;{ 　　如果(error.response) {//退出登陆的时候就响应于401年即可 　　如果(error.response。状态==401){ 　　router.go (0); 　　} 　　} 　　返回Promise.reject (error.response.data)//返回接口返回的错误信息 　　} 　　); 　　 　　

其中,lkdjoifdgjdfgjdfgjfh24546这个是写在登陆页面一个隐藏域里面的。

　　

　　 　　 　　进口org.springframework.web.servlet.handler.HandlerInterceptorAdapter; 　　 　　进口com.lovnx.gateway.po.User; 　　 　　进口javax.servlet.http.HttpServletRequest; 　　进口javax.servlet.http.HttpServletResponse; 　　 　　公开课LoginInterceptor延伸HandlerInterceptorAdapter { 　　 　　@Override 　　公共布尔preHandle (HttpServletRequest请求,HttpServletResponse响应对象处理程序){抛出异常 　　字符串requestUri=request.getRequestURI (); 　　字符串contextPath=request.getContextPath (); 　　 　　如果(requestUri.indexOf祝辞("/login.html ");1 | | requestUri.indexOf祝辞(“/系统/登录”);1){ 　　返回true; 　　} 　　 　　用户用户=(用户)request.getSession () .getAttribute(“用户”); 　　如果(用户==null) {//未登录跳转到登录页面!”); 　　响应。sendRedirect (contextPath + "/login.html "); 　　返回错误; 　　其他} 　　返回true; 　　} 　　 　　} 　　 　　

以上这篇Vue2.0 axios前后端登陆拦截器(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

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