Vue2.0 axios前后端登陆 * (实例讲解)
作者:Lovnx 发布时间:2023-07-02 16:59:11
标签:axios,前后端,登陆, , ,vue2.0
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;
}
}
来源:http://blog.csdn.net/rickiyeat/article/details/77030124
0
投稿
猜你喜欢
- 在上一期中作者向诸位简要介绍了 ASP 脚本语言之一 VBScript 的一些基本常识,本期将继续给大家讲解 VBScript 的脚本编写方
- 前言最近在解决一些算法优化的问题,为了实时性要求,必须精益求精的将资源利用率用到极致。同时对算法中一些处理进行多线程或者多进程处理。在对代码
- 前端css中用到less,在pycharm中安装配置less操作步骤如下:1.点开setting,在Plugins中搜索node.js(安装
- springboot数据库查询时出现的时区差异最近项目中使用到多数据源将MySQL库中的数据迁移到mongo库中,发现取出后的数据与原数据时
- position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览
- 1、编写TCP服务器程序。2、获取浏览器发送的http请求消息数据。3、读取固定的页面数据,将页面数据组装成HTTP响应消息数据并发送给浏览
- 在/etc/profile.d/简历oracle.sh内容如下在NLS_LANG设置编码ORACLE_HOME=/usr/lib/oracl
- Image and text elements that appear in another element are called floa
- 原来的程序是使用sqlite这个嵌入式数据库作为Remit(code name)的数据源的,因为NHibernate支持这个,然而有一点不好
- 以前在一个图书类网站看到这样一个功能:客户可以按条件搜索书目的信息,服务器会将符合条件的信息筛选出来保存为一个Excel文件供客户下载。今天
- 1、 前端传参要求项目开发中经常会遇到对用户输入内容的限制,本篇对常用限制做一总结。如下图所示,标识字段有严格命名限制,用户输入校验这部分工
- 日期的转换及计算对于日期,有时需执行不同时间单位的转换,或者接受字符串格式的日期,转换为 datetime 对象。有时需计算日期的范围,以及
- 前言事情是这样的,昨天去表弟家,用了下他的电脑,不小心点到了他硬盘里隐藏的秘密,本来我只需要用几分钟电脑的,害得我硬是在电脑旁坐了几个小时~
- 一、开发环境Python 3.8Pycharm 2021.2 专业版二、模块使用csv 模块 把爬取下来的数据保存表格里面的 内置模块req
- Python3.7引入了dataclass。dataclass装饰器可以声明Python类为数据类;数据类适合用来存储数据,一般而言它具有如
- 之前遇到技术问题总能在技术博客上得到启发,十分感谢各位的无私分享。而自己却很少发文,固然是水平有限,但也限制了知识积累和总结。今后多总结分享
- 背景喵哥想在MFC中调用python脚本,在原来的代码中包含一个只支持x86的库文件(超级核心的文件),原本安装的python是x64的,强
- 问题描述:通过EasyConnect登录后可以用xshell连接服务器,同时可以使用navicat和pymysql连接mysql数据库(无论
- 如果字典中存储了一些值,我想要取出来该怎么操作呢?1、我要取出字典中所有的键-值对取出字典中所有的键-值对时,可以使用items()返回一个
- 效果1 实现代码读取txt文件:def readText(text_file_path): with open(t