-
2019-08-26 20:30:08
转载自https://blog.csdn.net/qq_26566331/article/details/72478923
更多相关内容 -
vue中session的存取用法
2020-03-21 21:33:02存的方法 sessionStorage.setItem(“username(起一个名字为了取得时候用)”, this.value(这个是你要存进去的数据)); 取的方法 你可以定义一个变量然后去取他 this.(你取名的变量) = sessionStorage.getItem(... -
vue用session存取数据
2021-11-19 19:51:01//将js数据转换为json格式数据存放到session sessionStorage.setItem("username", JSON.stringify(data)); 2.取数据 var user = sessionStorage.getItem("username"); if (user != null) { // 将JSON格式的...1.存放数据
//将js对象转换为json对象存放到session sessionStorage.setItem("user", JSON.stringify(data));
2.取出数据
let user = sessionStorage.getItem("user"); if (user != null) { // 将JSON格式的对象解析为js对象 this.currentUser= JSON.parse(user); }
!!注意存放数据的名字要和取数据的名字一致
-
springboot+vue实现细粒度的session处理
2020-08-24 20:51:11springboot+vue实现细粒度的session处理 编写逻辑 1.使用自定义的过滤器去实现servlet的Filter接口,重写doFilter方法 2. 在springboot的入口类上使用@ServletComponentScan注解引入自定义的过滤器 3. 在实现...springboot+vue实现细粒度的session处理
编写逻辑
1.使用自定义的过滤器去实现servlet的Filter接口,重写doFilter方法
2. 在springboot的入口类上使用@ServletComponentScan注解引入自定义的过滤器
3. 在实现doFilter方法的时候,如果session没有过期,则放行,否则则返回session过期的提示信息给前端
4. 前端接收到session过期(一般都会在请求响应时做统一处理),则提示用户session过期,然后重定向到登录页面即可;代码示例
-
以下代码参考了部分网友的写法:spring boot使用过滤器(以session校验为例)
-
后端代码:
A.自定义的Filter:
import com.alibaba.fastjson.JSONObject; import com.itsource.base.common.SdmConst; import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; import java.io.PrintWriter; @WebFilter(filterName = "sessionFilter",urlPatterns = {"/*"}) public class SessionFilter implements Filter { //标示符:表示当前用户未登录(可根据自己项目需要改为json样式) String EXPIRE_MSG = "{\"data\":{\"code\": \"100003\"}}"; //不需要登录就可以访问的路径(比如:注册登录等) String[] includeUrls = new String[]{"/tsyslogin/actionTSysLogin.do","/tsysuser/queryTSysMenuTreeByUser.do"}; @Override public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException { HttpServletRequest request = (HttpServletRequest) servletRequest; HttpServletResponse response = (HttpServletResponse) servletResponse; HttpSession session = request.getSession(false); String uri = request.getRequestURI(); System.out.println("filter url:"+uri); //是否需要过滤 boolean needFilter = isNeedFilter(uri); if (!needFilter) { //不需要过滤直接传给下一个过滤器 filterChain.doFilter(servletRequest, servletResponse); } else { //需要过滤器 // session中包含user对象,则是登录状态 if(session!=null&&session.getAttribute(SdmConst.LOGIN_SESSION_KEY) != null){ // System.out.println("user:"+session.getAttribute("user")); filterChain.doFilter(request, response); }else{ String requestType = request.getHeader("X-Requested-With"); //判断是否是ajax请求 if(requestType!=null && "XMLHttpRequest".equals(requestType)){ }else{ response.setCharacterEncoding("UTF-8"); response.setContentType("application/json; charset=utf-8"); PrintWriter out = response.getWriter(); JSONObject res = new JSONObject(); res.put("code", "100003"); out.append(res.toString()); } } } } /** * @Author: xxxxx * @Description: 是否需要过滤 * @Date: 2018-03-12 13:20:54 * @param uri */ public boolean isNeedFilter(String uri) { for (String includeUrl : includeUrls) { if(includeUrl.equals(uri)) { return false; } } return true; } @Override public void init(FilterConfig filterConfig) throws ServletException { } @Override public void destroy() { } }
B.入口程序:
import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.boot.autoconfigure.mongo.MongoAutoConfiguration; import org.springframework.boot.web.servlet.ServletComponentScan; /** * 注:为了避免扫描路径不一致,请将启动类放在Root Package 即 com.itsource */ @SpringBootApplication(exclude = MongoAutoConfiguration.class) @MapperScan("**.itsource.**.mapper") @ServletComponentScan public class WebApplication { public static void main(String[] args) { SpringApplication.run(WebApplication.class, args); } }
3.前端代码
import axios from 'axios'; // import qs from 'qs'; import router from '@/router'; import ErrorHandling from './error-handling'; import {Modal} from 'ant-design-vue'; import Loading from './loading-toast' import {crypto} from '../utils'; import Vue from 'vue'; import {merge} from 'lodash'; const Error = new ErrorHandling(); /** * Axios构造函数 * @method CreatAxios * @param {Object} config * @constructor */ function CreatAxios(config = {}) { merge({ // baseURL: '/', // 因为我本地做了反向代理 timeout: 60 * 1000, // 超时处理 responseType: 'json', // 响应数据类型 withCredentials: true, // 是否允许带cookie这些 headers: { // json 或者 x-www-form-urlencoded 自行选择 // 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8', 'Content-Type': 'application/json;charset=utf-8' } }, config); const Axios = axios.create(config); //POST传参序列化(添加请求拦截器) Axios.interceptors.request.use( config => { Loading.open(); // 在发送请求之前做某件事 // 温馨提示,若提交能直接接受json 格式,可以不用 qs 来序列化的 // if (config.method === 'post') { // // 序列化 // config.data = qs.stringify(config.data); // } // 开启上送数据加密 if ((config.hasOwnProperty('encrypt') ? config.encrypt : Vue.config.encrypt) && config.data) { config.data = crypto.Encrypt(config.data) } return config; }, error => { Loading.close(); // error 的回调信息 Modal.error({ title: '请求失败', cancelText: '确定', content: error && error.data.error.message }); return Promise.reject(error.data.error.message); } ); //返回状态判断(添加响应拦截器) Axios.interceptors.response.use( res => { Loading.close(); //对响应数据做些事 if (res.data) { //判断session是否过期 if (res.data.code === '100003') { // Modal.error({ title: '访问错误', cancelText: '确定', content: '用户登录过期,请重新登录!', onOk: () => { router.push({ path: '/login' }) }}) return } //请求错误 if (res.data.code !== '000000') { const err_msg = Error.business(res.data); // 错误处理 Modal.error({ title: '请求错误', cancelText: '确定', content: err_msg, onOk: () => { // router.push({ // path: '/login' // }); } }) } // 响应解密 if ((res.config.hasOwnProperty('encrypt') ? res.config.encrypt : Vue.config.encrypt) && res.config.data) { res.data = crypto.Decrypt(res.data) } } if (res.hasOwnProperty('data')) { res = res.data } return res; }, error => { Loading.close(); const errMsg = Error.server(error.response); Modal.error({ title: '服务器错误', okText: '确定', content: errMsg }); return Promise.reject(error); } ); return Axios; } // 对axios的实例重新封装成一个plugin ,方便 Vue.use(xxxx) export default CreatAxios;
以上只是个人的用法,在此做一个记录,仅供参考!
-
-
关于Iframe如何跨域访问Cookie和Session的解决方法
2020-10-27 12:20:24本篇文章小编将为大家介绍,关于Iframe如何跨域访问Cookie和Session的解决方法,有需要的朋友可以参考一下 -
vue3 + ts + vite + element-plus记录session
2022-06-01 16:04:25无 -
java+vue跨域每次请求获取不同session问题
2021-02-26 10:04:28描述vue在做登录的时候,明明已经把用户数据存入了httpsession中,但在后面的请求拦截中发现获取的session属性size为0断点发现登录用的session和拦截得到的session不是一个id,也就是说不是同一个session查资源得到... -
Vue使用axios引起的后台session不同操作
2020-10-14 22:23:45主要介绍了Vue使用axios引起的后台session不同操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 -
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2020-10-17 00:19:11主要介绍了前后端分离 vue+springboot 跨域 session+cookie失效问题的解决方法,解决过程也很简单 ,需要的朋友可以参考下 -
Chrome调试vue项目时session异常,后端tp6 session使用异常
2021-03-12 17:23:08Chrome调试时跨站不能设置cookie问题 this set-cookie didn't specify a "SameSite" attribute,然后变成默认Lax。 然后我搜索了一下Samesite定义,有三个值,None, Lax,Strict.... ...找了一下怎么关闭chrome的这个... -
vue2 前后端分离项目ajax跨域session问题解决方法
2020-08-30 16:50:13本篇文章主要介绍了vue2 前后端分离项目ajax跨域session问题解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
解决vue项目axios每次请求session不一致的问题
2021-01-18 17:01:231、vue开发后台管理项目,登录后,请求数据每次session都不一致,后台返回未登录,处理方法打开main.js设置: // The Vue build version to load with the `import` command // (runtime-only or standalone) has ... -
vue+koa跨域访问session失效和跨域请求头设置
2020-05-14 23:50:22vue使用vue-session 都在npmjs上下载 在跨域的情况下(前后端域名不同),koa后端使用ctx.session保存用户名是不会保存在浏览器前端的。可能体现为每次刷新页面都会失去登录状态。 需要在koa后端的app.js中加入... -
vue+flask完成登录验证和session的使用
2019-06-12 21:59:03使用vue判断验证用户登录状态 导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等。 其中router.beforeEach就是路由进入前的周期,同时有路由... -
vue 跨域请求session的问题
2019-07-10 10:28:16main.js中插入 importaxiosfrom'axios' axios.defaults.withCredentials=true -
Vue项目和flask框架前后端分离session的坑
2020-06-23 18:28:11Vue项目和flask框架前后端分离session的坑Vue的项目启动Flask的项目启动前后端分离 Vue的项目启动 一般来说,现在的开发环境都是使用自动化工具进行项目创建和开发。 所以,在测试时,自动化工具会帮我们创建一个... -
Vue 如何监听session值的变化
2020-01-18 11:29:45如何监听session值的变化 首先在在main.js给Vue.protorype注册一个全局方法 //main.js Vue.prototype.resetSetItem = function (key, newVal) { if (key =='collapse') { // 创建一个StorageEvent事件 var ... -
vue session
2021-07-19 11:35:26 -
Vue中跨域以及sessionId不一致问题解决方法
2018-10-23 16:05:49在使用Vue和SpringBoot做前后端分离项目时,会出现以下问题: 前端直接请求数据会出现跨域访问限制的问题。 如果登录时还需要图片验证码验证,首先需要请求获取验证码的接口,然后将验证码存入session中并返回给... -
vue使用session功能,保存和获取对象信息
2022-03-03 11:24:05vue操作session,保存和获取对象信息 const path = '/user' const tabsData = [] const tab = { path: '/' + path, name: name } tabsData.push(tab) // 保存 window.sessionStorage.setItem('tabsData',... -
Vue封装local及session
2021-11-19 14:18:11封装local及session,方便后续调用。 1、src目录下创建storge文件夹 ...import Vue from 'vue' import LocalStorage from './storge.local' import SessionStorage from './storge.session' //原型链设... -
Vue 中 使用 vue-cookies和vue-session
2019-05-17 10:33:18一、Vue中使用vue-session 1.npm 安装 vue-session npm install vue-session 2.在main.js中引入 import VueSession from 'vue-session' Vue.use(VueSession) 3.使用 this.$session.set("key",value); //存... -
4.Vue跨域session问题解决
2021-06-29 12:33:224.Vue跨域session问题解决 -
Vue+NodeJS的跨域请求如何保存session
2017-08-04 21:46:36今天一直在练习如何使用Vue,就把自己之前用node写的个人博客改改,拿来当接口,涉及到跨域请求的问题,接下来简单的说下自己所遇到的问题,和解决方法。一. 用cors来实现跨域请求:一想到跨域请求,脑子里首先出现... -
解决Vue前端跨域Session失效问题
2021-06-27 19:11:001.npm install axios 2.设置请求头允许携带cookid -
springboot+vue 统一sessionid限制登录
2022-04-21 14:30:00} //添加 public synchronized void addSession(HttpSession session) { if(session!= null) { map.put(session.getId(), session); } } //获取 public synchronized HttpSession getSession(String sessionId) { ...
收藏数
27,359
精华内容
10,943