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
投稿
猜你喜欢
- 本文介绍一种将一个大的文本文件分割成多个小文件的方法方法一:1.读取文章所有的行,并存入列表中2.定义分割成的小文本的行数3.将原文本内容按
- 本文实例为大家分享了vue组件watch属性的具体代码,供大家参考,具体内容如下<!doctype html><html&
- 存储过程中的TOP后跟一个变量会如何? Create proc getWorkPlan2 (@intCounter int ,@lngUse
- 前言本文主要给大家介绍的是关于在Python3使用PyMongo的方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细介绍:Mong
- 代码代码很简单,主要是为了熟悉Selenium这个库的函数,为后续的短信轰炸做个铺垫from selenium import webdriv
- 一、python多线程因为CPython的实现使用了Global Interpereter Lock(GIL),使得python中同一时刻只
- 王者荣耀的火爆就不用说了,但是一局中总会有那么几个挂机的,总能看到有些人在骂人,我们发现,当你输入一些常见的辱骂性词汇时,系统会自动将该词变
- 环境:python3.6 pyqt5只是简单的一个思路,请忽略脆弱的异常防护:# -*- coding: utf-8 -*-import s
- 目录1、准备基础数据2、一次性展示数据3、引入分页器附:drf分页器的使用1.1 PageNumberPagination1.2 Limit
- PHP中的MYSQL常用函数1、mysql_connect()-建立数据库连接格式:resource mysql_connect([stri
- 有一个比较大的数据集需要自己处理,在分出训练集和测试集时,如果靠手动实在太麻烦,于是自己写了一段代码。(其实就是在某一路径下的子文件夹里取出
- 目录1、互斥锁Mutex1.1 Mutex介绍1.2 Mutex使用实例2、读写锁RWMutex2.1 RWMutex介绍2.2 RWMut
- 第一部分 关于requests库(1) requests是一个很实用的Python HTTP客户端库,编写爬虫和测试服务器响应数据时经常会用
- 1 . 如何让自己的本地APACHE服务器支持.htaccess 如何让自己的本地APACHE服务器支持”.htaccess”呢?其实只要简
- DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据
- 前言为了保证数据的一致完整性,任何一个数据库都存在锁定机制。锁定机制的优劣直接应想到一个数据库系统的并发处理能力和性能,所以锁定机制的实现也
- 一、首先我们来填个坑支付验签失败这个问题折磨了我两天,官方文档比较含糊不清。各种百度下来的方法试过之后也不尽人意,最后发现问题是没有二次签名
- Random库主要包含返回随机数的函数,主要用于普通的随机数生成的程序,如果对随机性有特殊要求,比如加密等,可以用函数os.urandom(
- 日常在网站使用过程中经常遇到图形验证,今天准备自己做个图形验证码,这算是个简单的功能,也适合新手练习的,便于自己学习。 主要用到的库--PI
- 本文实例讲述了Python实现的爬取百度贴吧图片功能。分享给大家供大家参考,具体如下:#coding:utf-8import request