精华内容
下载资源
问答
  • // 调用全局挂载的方法,关闭当前标签页 this.$store.dispatch("tagsView/delView", this.$route); //返回上一个tab页面 返回上一步路由, this.$router.go(-1); //返回到指定路由 this.$router.push({path: '/...
     // 调用全局挂载的方法,关闭当前标签页
     this.$store.dispatch("tagsView/delView", this.$route);
      
    //返回上一个tab页面 返回上一步路由,
     this.$router.go(-1);
    //返回到指定路由
     this.$router.push({path: '/reward/hongbao/transfer'})

     

    展开全文
  • // 调用全局挂载的方法,关闭当前页 this.$store.dispatch("tagsView/delView", this.$route); //关闭之后跳转你要跳转的路由 this.$router.push({ path: '/bidderDeclaration' }) //也可以 返回上一步路由 ...
      // 调用全局挂载的方法,关闭当前页
         this.$store.dispatch("tagsView/delView", this.$route);
     // 关闭之后跳转你要跳转的路由
         this.$router.push({ path: '/bidderDeclaration' })
     // 也可以 返回上一步路由
         this.$router.go(-1)
    
    展开全文
  • goBack(){ this.$store.dispatch("tagsView/delView", this.$route); this.$router.go(-1); }
    goBack(){
          this.$store.dispatch("tagsView/delView", this.$route);
          this.$router.go(-1);
    }

     

    展开全文
  • sessionStorage :~5MB,数据只在当前标签页有效 cookie :~4KB,可以设置成永久有效 session cookie :~4KB,当用户关闭浏览器时删除(并非总能立即删除) 安全的认证token保存 一些重要的系统会要求当用户关闭标签...

    sessionStorage不能跨标签页解决方案–vue项目

    现有的浏览器存储机制
    localStorage :~5MB,数据永久保存直到用户手动删除
    sessionStorage :~5MB,数据只在当前标签页有效
    cookie :~4KB,可以设置成永久有效
    session cookie :~4KB,当用户关闭浏览器时删除(并非总能立即删除)
    安全的认证token保存

    一些重要的系统会要求当用户关闭标签页时会话立刻到期。

    为了达到这个目的,不仅绝对不应该使用cookies来保存任何敏感信息(例如认证token)。甚至session-cookies也无法满足要求,它在标签页关闭(甚至浏览器完全关闭)后还会持续存活一定时间。

    (任何时刻我们都不应该只使用cookies,它还有其他很多问题需要讨论,例如CSRF)

    这些问题就使得我们在保存认证token时应使用内存或sessionStorage。sessionStorage的好处是它允许跨多个页面保存数据,并且也支持浏览器刷新操作。这样用户就可以在多个页面之间跳转或刷新页面而保持登录状态。

    Good。我们将token保存在sessionStorage,并在每次请求服务器时将token放在请求头中来完成用户的身份认证。当用户关闭标签页,token会立即过期。

    但多标签页怎么办?

    即便是在单页面应用中也有一个很常见的情况,用户经常希望打开多个标签页。而此场景下将token保存在sessionStorage中将会带来很差的用户体验,每次开启一个标签页都会要求用户重新登录。没错,sessionStorage不支持跨标签页共享数据。

    利用localStorage事件来跨标签页共享sessionStorage

    我利用localStorage事件提出了一种解决方案。

    当用户新开一个标签页时,我们先来询问其它已经打开的标签页是不是有需要给我们共享的sessionStorage数据。如果有,现有的标签页会通过localStorage事件来传递数据到新打开的标签页中,我们只需要复制一份到本地sessionStorage即可。

    传递过来的sessionStorage绝对不会保存在localStorage,从localStorage事件将数据中复制并保存到sessionStorage,这个流程是在同一个调用中完成,没有中间状态。而且数据是对应事件携带的,并不在localStorage中。(译者注:作者意图解释这个方案的安全性)

    点击“Set the sessionStorage”,然后打开多个标签页,你会发现sessionStorage共享了。

    // 为了简单明了删除了对IE的支持
    (function(){
    if(!sessionStorage.length) {
    // 这个调用能触发目标事件,从而达到共享数据的目的
     localStorage.setItem('getSessionStorage',Date.now());
     };
    // 该事件是核心
    window.addEventListener('storage',function(event){
    if(event.key =='getSessionStorage') {
    // 已存在的标签页会收到这个事件
     localStorage.setItem('sessionStorage',JSON.stringify(sessionStorage));
     localStorage.removeItem('sessionStorage');
     } elseif(event.key =='sessionStorage'&& !sessionStorage.length) {
    // 新开启的标签页会收到这个事件
    vardata =JSON.parse(event.newValue),
     value;
    for(keyindata) {
     sessionStorage.setItem(key, data[key]);
     }
     }
     });
    })();
    

    接近完美

    我们现在拥有了一个几乎非常安全的方案来保存会话token在浏览器里,并支持良好的多标签页用户体验。现在当用户关闭标签页后能确保会话立即过期。难道不是么?

    chrome和firefox都支持当用户进行“重新打开关闭的标签页”或“撤销关闭标签页”时恢复sessionStorage。F**k!(译者注:作者原文用的是“Damn it!”,注意到那个叹号了吗?)

    safari在这个问题上处理是正确的,它并不会恢复sessionStorag(只测试了上述这三个浏览器)。

    对用户而言,能够确定sessionStorag已经过期的方法是直接重新打开网站,而不是选择“重新打开关闭的标签页”。

    除非chrome和firefox能够解决这个bug。(但我预感开发组会称其为“特性”)

    即便存在这样的bug,使用sessionStorag依然要比session-cookies方案或其他方案要安全。如果我们希望得到一个更加完美的方案,我们就需要自己来实现一个内存的方案来代替sessionStorag。(onbeforeunload也能做到,但不是太可靠且每次刷新页面也会被清空。window.name也不错,但它太老了且也不支持跨域保护)

    跨标签页共享memoryStorage

    这应该是唯一一个真正安全的实现浏览器端保存认证token的方法了,并且要保证用户打开多个标签页不需要重新登录。

    关闭标签页,会话立即过期–这次是真真儿的。

    这个方案的缺点是, 当只有一个标签页时 ,浏览器刷新会导致用户重新登录。安全总是要付出点代价的,很明显这个缺点可能是致命的。

    在线例子

    设置一个memoryStorage,然后打开多个标签页,你会发现数据共享了。关闭所有标签页token会立即永久过期(memoryStorage其实就是一个javascript对象而已)。

    (function(){
    window.memoryStorage = {};
    functionisEmpty(o){
    for(variino) {
    returnfalse;
     }
    returntrue;
     };
    if(isEmpty(memoryStorage)) {
     localStorage.setItem('getSessionStorage',Date.now());
     };
    window.addEventListener('storage',function(event){
    if(event.key =='getSessionStorage') {
     localStorage.setItem('sessionStorage',JSON.stringify(memoryStorage));
     localStorage.removeItem('sessionStorage');
     } elseif(event.key =='sessionStorage'&& isEmpty(memoryStorage)) {
    vardata =JSON.parse(event.newValue),
     value;
    for(keyindata) {
     memoryStorage[key] = data[key];
     }
     }
     });
    })();
    

    以上是引用http://www.qiqinote.com/note/67.html作者的内容
    **

    下面是vue项目实例去使用

    **
    直接在vue项目中main.js去使用,保证每个页面打开新标签都能正常获取sessionStorage
    通过带target="_blank"的A标签、window.open等方式打开新窗口时,会把旧窗口(或标签)的sessionStorage数据带过去,但从此之后,新窗口(或标签)的sessionStorage的增删改和旧窗口已经没有关系了,如果只是在当前标签内跳转新页面(或者刷新),数据还会保留(前提当然是同域)

    如果是自己打开浏览器的新标签页可能就需要使用这种配置,保证会话缓存可以共享,亲测有效!(如果有任何问题请及时联系)

    展开全文
  • 刷新当前标签页 关闭其他标签/关闭所有标签 注意:组件的名称和路由的名称一定要一致,例如Home.vue组件名称name: home ,则在路由文件中也要给它设置为name: home ,否则页面内容不能缓存 // 在router文件中 { ...
  • 刷新当前标签页 关闭其他标签/关闭所有标签 注意: 组件的名称和路由的名称一定要一致,例如 Home.vue 组件名称 name: home,则在路由文件中也要给它设置为 name: home,否则页面内容不能缓存 // 在router文件中 { ...
  • Vue 轻量级后台管理系统基础模板

    千次阅读 2018-12-13 17:32:08
    vue-admin-template vue轻量级后台管理系统基础模板 ...刷新当前标签页 关闭其他标签/关闭所有标签 侧边栏 伸展/收缩 页面宽度过小自动收缩 多级菜单(利用iView组件) 用户相关 消息通知 用户头像 基本资料 ...
  • 业务需求: 切换tab页标签的时候(路由前进的时候...4、关闭标签页(也就是后退路由的时候),清空store里的数组 总结:通过动态的设置include(要缓存的组件)的数组,来动态的控制组件是否缓存 以上这篇vue keep-aliv
  • vue中sessionStorage的使用

    千次阅读 2020-07-20 12:42:47
    sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。 提示: 如果你想在浏览器窗口关闭后还保留数据,可以使用 localStorage 属性, 改数据对象没有过期时间,今天、...
  • sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。 提示: 如果你想在浏览器窗口关闭后还保留数据,可以使用 localStorage 属性, 改数据对象没有过期时间,今天、...
  • Vue 单页面应用, 全局数据共享方案

    千次阅读 2019-04-01 08:40:30
    需求: Vue 单页面应用, 不同页面之间数据...浏览器级别数据存储,数据共享,页面刷新不影响数据存储,但每次存取都需要JSON序列化和解序列化,较为繁琐,浏览器页面之间不通用,关闭后浏览器标签页后数据丢失 3...
  • 基于vue多tab实现 本模板提供了最精简实现的代码,简单易懂,以及灵活控制tab的接口。 账号superadmin 密码666666 demo中增加了类似浏览器标签功能、拖拽、右键等。 多tab实现常见问题 tab页面数据的缓存统一...
  • vue keep-alive 动态删除组件缓存

    万次阅读 2018-10-11 09:18:13
    业务需求: 切换tab页标签的时候(路由前进的时候),缓存当前组件数据,关闭tab页标签的时候清除组件缓存。 实现: 1、先在store的state里面设置一个要缓存数组 2、在进到子页面的时候,更新store的数组,把...
  • 1、如果弹框内容不需要滚动 直接在灰色背景元素上绑定@...当模态框关闭时body标签动态移出类名,并把存在data里的 this.mockScrollTop 值赋值给当前滚动高度 第一步定义需要用到的变量,并且赋予默认值 data(){ r
  • <div><p>如果想一次性关闭多个标签页,并保留某个标签页关闭,不对它进行刷新重置,不使用reset这个api 现在思路主要是结合close这个api和打开的tab页个数来循环关闭,现在问题是获取不到...
  • COVID-19 Sledilnik网站 执照 该软件已获得。 结构体 夹 内容 src/assets 静态内容(图像,媒体文件) src/components ... 移除标签关闭公关时取消部署公关 动作主要包括3个工作: test , build和deplo
  • 一键将您当前标签页的网址列入白/黑名单 快捷方式-通过热键快捷方式或页面上下文菜单快速使用功能 如何使用: 通过单击浏览器顶部导航中的“ Raspberry”图标打开弹出窗口 单击右上角的后转盘 输入您的主机地址...
  • 70款经典Dreamweaver插件

    2011-09-21 12:42:27
    CloseWindowOb 建立关闭当前窗口的链接 mm_flabutton_styles 为DW4增加几款新的Flash按钮样式 mx142100_mmflabuttonstyles 13款Flash Button,并带有.fla的源文件 mx196756_turkeyscounties 80多个国家的一个下拉...
  • Dreamweaver 插件集

    2012-02-04 16:16:36
    方便的插入一个关闭当前页面的按钮,可以选择按钮、图片、或者文字3种方式 tooltips 制作注释 UI_components Flash UIComponent floatimg 在页面上制作的飘浮图片插件,没时间封装 mmJIK Macromedia亲自为...
  • 标签页标题切换功能 添加字数统计功能 添加文字输入特效 友情链接优化展示 左侧边栏动态图效果、左侧导航栏支持滚动 添加悬停预览图片效果 其他样式轻微调优、社交图标优化 优化配置是否在新窗口打开链接 fix bugs ...

空空如也

空空如也

1 2
收藏数 27
精华内容 10
关键字:

vue关闭当前标签页

vue 订阅