本文主要为大家带来一篇vue2.0 axios前后端登陆拦截器(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
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; }}
登录后复制
相关推荐:
Vue-resource拦截器判断token失效跳转
Vue拦截器vue-resource 拦截器使用详解
微信小程序开发页面拦截器的详解
以上就是Vue2.0 axios前后端登陆拦截器详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2790234.html
