Vue2.0 axios前后端登陆 * (实例讲解)
作者:Lovnx 时间:2023-07-02 16:59:11
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
标签:axios,前后端,登陆, , ,vue2.0
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
SQL SERVER 2008数据库日志文件收缩的方法
2024-01-27 09:29:38
![](https://img.aspxhome.com/file/2023/4/104074_0s.png)
MySQL性能优化技巧分享
2024-01-26 06:58:16
golang json性能分析详解
2024-05-09 14:57:46
![](https://img.aspxhome.com/file/2023/3/127063_0s.png)
Django+Bootstrap实现计算器的示例代码
2022-08-10 02:42:01
![](https://img.aspxhome.com/file/2023/8/127288_0s.jpg)
python geemap的安装步骤及环境配置
2023-05-13 18:07:35
![](https://img.aspxhome.com/file/2023/1/112511_0s.jpg)
详解Python中@staticmethod和@classmethod区别及使用示例代码
2023-06-03 12:17:20
![](https://img.aspxhome.com/file/2023/5/70235_0s.png)
段正淳的css笔记(7)-表单在各浏览器的表现统一
2008-01-14 02:47:00
Python数据可视化之绘制柱状图和条形图
2022-10-19 21:51:46
![](https://img.aspxhome.com/file/2023/8/97338_0s.png)
MySQL的存储函数与存储过程相关概念与具体实例详解
2024-01-19 05:50:32
详解Oracle数据库各类控制语句的使用
2024-01-13 16:49:00
pyinstaller使用大全
2022-12-17 21:37:28
安装Python和pygame及相应的环境变量配置(图文教程)
2023-09-05 15:54:42
![](https://img.aspxhome.com/file/2023/9/97049_0s.png)
numpy返回array中元素的index方法
2023-10-04 22:43:10
利用 Monkey 命令操作屏幕快速滑动
2021-03-06 11:37:50
![](https://img.aspxhome.com/file/2023/6/89136_0s.png)
详解Python中的三器一闭
2023-05-30 15:08:16
![](https://img.aspxhome.com/file/2023/8/89448_0s.jpg)
utf8_unicode_ci与utf8_general_ci的区别
2010-03-03 15:54:00
python实现自动登录人人网并访问最近来访者实例
2022-11-30 17:09:15
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2024-05-10 14:17:43
![](https://img.aspxhome.com/file/2023/0/126460_0s.png)
PHP中使用cURL实现Get和Post请求的方法
2023-08-18 13:15:35
Python日期时间Time模块实例详解
2023-11-07 07:26:34