源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-02-07 21:44 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Vue2.0 axios前后端登陆拦截器(实例讲解)
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐使用axios。前段时间第一次在项目里用到vue,关于登陆问题,这里写一下心得。 [b]首先后端:[/b]
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错误。 [b]前端:[/b]
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工程的例子。 [b]工程目录:[/b] [img]http://files.jb51.net/file_images/article/201710/20171027101513.jpg[/img] 其中的static和index.html是webpack打包后的东西。 这里的思想要结合以前写的一篇博文:[b][url=http://www.1sucai.cn/article/113351.htm]重写ajax实现session超时跳转到登陆页面[/url][/b] 大概思想就是:请求任何一个页面,后端拦截器拦截到请求,查看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域里面的。 [b]后端拦截器: [/b]
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前后端登陆拦截器(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部