vue监听本地存储token不存在自动刷新页面

2023-11-10

我们在代码编写的时候,为了更好的体验,有时候需要清除本地存储的token来自动刷新页面跳到登陆页面

这时候就需要一个监听器来监听本地存储的变化来执行操作

下面我们会用到一个JavaScript的addEventListener()事件监听方法

首先先定义本地存储

localStorage.setItem("adminToken","token")

在这里插入图片描述
这个时候我们已经定义好了,接下来使用addEventListener()来监听它的变化
我们在控制台更改一下本地存储的值
vue在main.js中添加以下代码

// 监听本地存储删除刷新页面
window.addEventListener('storage', function (e) {
  //这个e返回的是哪个值被更改,更改后的值跟更改之前的值
  console.log(e)
  if (localStorage.getItem("adminToken")) {
	//这里是判断本地存储adminToken存在的时候写的逻辑
  } else {
    location.reload();
    //这里是判断本地存储adminToken不存在的时候写的逻辑,这里可以让他跳转到登陆页面
  }
})

我们来看一下这个e打印的是什么
在这里插入图片描述
我们可以让他更改之后做出一些相应的操作,可以判断它存在不存在,来跳转登陆页面

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue监听本地存储token不存在自动刷新页面 的相关文章

  • ExitFullScreen 不起作用 + 无论如何要按键盘单击按钮?

    我的浏览器 Google Chrome 版本 33 0 1750 154 m Script function exitFullscreen var element document documentElement if element mo
  • 标点符号加载“动画”,javascript?

    我正在寻找一种好方法来显示一些标点符号加载 动画 我想要的是这样的 This will display at second 1 Waiting for your input This will display at second 2 Wai
  • 如何延迟 NavLink 的反应?

    Delay e gt e preventDefault setTimeout gt e unpreventDefault make this work 500 render
  • JavaScript:参数列表后缺少 )

    这个 JavaScript 产生一个错误 参数列表后缺少 在 firebug 中使用代码 我究竟做错了什么 功能d缺少左括号 answer after 不应该逃避 只需常规报价即可
  • 无法从 Twin.macro 中的 Prop 获取值

    您可以在这里查看我正在尝试执行的操作的示例 https codesandbox io s vibrant leaf qj8vz https codesandbox io s vibrant leaf qj8vz 注意 这个特定的例子使用双宏
  • iPad 2 的 HTML5 源元素错误是否已修复?

    根据这个页面 http camendesign com code video for everybody webm http camendesign com code video for everybody webm 第一个 iPad 有一
  • 动态地将 .on() 方法与事件映射绑定

    我使用此语法来确保事件绑定动态添加li元素 ul list on click li function do something 我尝试使用这样的事件映射来存档相同的内容 ul list hammer css hacks false on s
  • 以编程方式触发 highchart 散点图上某个点的单击事件

    实际上 我有一个小要求 其中有一个带有点列表和下拉列表的散点图 当我从下拉列表中选择一个项目时 应触发其相应的数据点单击 当我在图表上选择一个数据点时 必须执行一些操作 并且下拉列表应根据选择进行更新 我们有什么办法可以做到这一点吗 我尝试
  • 如何按值删除数组中的多个项目?

    我正在尝试做一个removeAll 函数 它将删除具有该特定值 而不是索引 的数组的所有元素 当我们对循环进行任何更改时 棘手的部分就出现了 索引往往会移动 使其很难像我们想要的那样工作 并且每次更改时都重新启动循环 这在大数组上效率非常低
  • Material.Angular.io mat-autocomplete [displayWith] 函数更新范围变量

    我遇到了一个问题 我可以在实例化 mat autocomplete 的组件控制器中访问本地声明的变量 我面临的问题是局部变量被困在这个范围内 我无法更新它们 有关更新 mat autocomplete 范围变量的任何想法或想法 最终我要做的
  • 我将 X Y Z 坐标转换为屏幕 X Y 坐标有什么问题吗?

    我正在制作 3D 空间中弹跳的球体的 HTML5 Canvas 演示 这非常简单 每个球都有 X Y 和 Z 坐标 然后 这些坐标将转换为我在此处阅读的屏幕 X 和 Y 坐标 http answers google com answers
  • Jquery获取每个div的子子div并将信息抓取到数组中

    我有一些看起来像这样的 html div div class sub main div div
  • 为 Gmail 设计 HTML 电子邮件

    我正在生成一封使用内部样式表的 html 电子邮件 即 h2 class foo Email content here 在 Gmail 中查看时 内部样式表中的所有样式似乎都被忽略 Gmail 似乎忽略了内联规则以外的所有样式 例如 h2
  • 在部分渲染时执行 JavaScript

    我有一些 JavaScript 代码 我想在用户单击其文件夹之一后执行 它会触发 show 操作和 show js erb 从而呈 现部分内容 Show js erb 当用户单击其文件夹之一时触发 如下所示 body append 它成功注
  • React TypeError:x 不是函数

    我在子组件中从父组件调用函数 booksRefresh 但出现错误 类型错误 booksRefresh 不是函数 我不知道为什么 因为 booksRefresh 是一个函数 有人可以帮我解释为什么会出现这个错误吗 这是我的代码 import
  • 需要根据用户选择有条件地渲染具有 X 行数的部分

    我有一个反应组件 其中包含一个下拉列表 其中的选项包括none 1 5 and 13 根据用户选择的数字 我需要渲染一个部分 其中包括许多行 每个行都有字段名称和下拉列表 如果用户不选择任何一个 我需要整个附加配置部分消失 新部分中的每个下
  • Skrollr 添加空白

    我已经尝试了一切 我在谷歌上阅读了 4 5 页试图找到适合我的修复程序 已经筋疲力尽了 即使我使用 skrollr 示例 我的问题仍然存在 不是说他们做错了什么 我知道我只是没有正确理解它 因此 我上传了一个演示 仅在移动设备上展示这个尴尬
  • 如何在 Aframe 中的平面上加载 gif(具有透明度)(故障)?

    大家好 我是 Aframe 的新手 正在尝试在空间网络环境中设置一大堆 gif 我在飞机上加载 gif 时遇到了一些困难 我已经通过 Aframe 的资产文件夹加载了图像 故障 目前它看起来像这样
  • 通过ajax执行后期操作时如何克服CORS重定向问题?

    我可以通过外部登录表单中的 post 方法类型提交表单来登录 roundcube 实例 托管在另一台服务器上 我收到此错误 通过 ajax 签名时 XMLHttpRequest 无法加载https 192 168 0 7 mail http
  • 将日期参数传递给对 MVC 操作的 ajax 调用的安全方法

    我有一个 MVC 操作 它的参数之一是DateTime如果我通过 17 07 2012 它会抛出一个异常 指出参数为空但不能有空值 但如果我通过01 07 2012它被解析为Jan 07 2012 我将日期传递给 ajax 调用DD MM

随机推荐

  • 编译原理递归下降分析器(语法分析器)(C/C++)

    include
  • dumpbin.exe简要使用说明

    该工具可以查看 exe的依赖文件 查看dll的导入及导出符号等 在命令行中输入dumpbin并回车 可显示所有选项 主要选项有 ALL 此选项显示除代码反汇编外的所有可用信息 可以与 RAWDATA NONE一起省略文件的原始二进制详细资料
  • Unity预制体Prefab及其实例化(Instantiate)

    简介 在Unity3D工程建设中 Prefabs 预设 是很常用的一种资源类型 是一种可以被重复使用的游戏对象 可以被置入多个场景中 也可以在一个场景中多次置入 在场景中增加一个Prefab 就是实例化了一个Prefab 所有的Prefab
  • Tensorflow 激活函数 activation function

    激活函数 activation function 线性模型的局限性 只通过线性变换 任意层的全连接神经网络和单层神经网络的表达能力并没有任何区别 线性模型能解决的问题是有限的 激活函数的目的是去线性化 如果将每一个神经元的输出通过一个非线性
  • nrm指令报错解决

    今天打算安装切换公司内部的npm源 出现报错 以下为全过程与解决方案 先全局安装nrm npm install nrm g 添加公司的registry nrm add 出现报错 Error ERR REQUIRE ESM require o
  • 多个字段同时去重

    首先创建一个表结构 其中数据如下 根据上面的name age sex三个字段进行去重 去重思想 说到去重 大家想到的肯定是distinct这个关键字 但这个关键字他只能对一个字段进行去重 那么如何同时根据这三个字段去重呢 办法就是把这三个字
  • 用户登录的详细流程(一)

    用户登录的详细流程 1 流程概述 1 首先在进行用户登录的时候 要进行一些必要的准备工作 比如说要对用户登录表进行设计 一般是userId userName phone password salt remark等等 通常数据库存储的密码是m
  • vue3中ts全局声明再.vue文件中显示no-undef

    显示错误xxx is not defined eslintno undef 解决方法 参考 Why Eslint don t see global TypeScript types in vue files no undef 在 eslin
  • 目前流行前端几大UI框架排行榜

    在前端项目开发过程中 总是会引入一些UI框架 已为方便自己的使用 很多大公司都有自己的一套UI框架 下面就是最近经常使用并且很流行的UI框架 一 Mint UI 流行指数 Mint UI是 饿了么团队开发基于vue js的移动端UI框架 它
  • python实现:提取文件夹中子文件夹的图片

    提取文件夹中子文件里的图片的方法 主要运用到的函数 import os import shutil 首先需要获取内部文件夹的文件名 os chdir D 作业 python 数据集 if masked AFDB masked face da
  • vue面试题汇总

    HTML篇 CSS篇 JS篇 TypeScript篇 React篇 微信小程序篇 前端面试题汇总大全 含答案超详细 HTML JS CSS汇总篇 持续更新 前端面试题汇总大全二 含答案超详细 Vue TypeScript React 微信小
  • 受标签影响的最大值

    题目描述 我们有一个 n 项的集合 给出两个整数数组 values 和 labels 第 i 个元素的值和标签分别是 values i 和 labels i 还会给出两个整数 numWanted 和 useLimit 从 n 个元素中选择一
  • Android之屏幕适配方案

    在说明适配方案之前 我们需要对如下几个概念有所了解 屏幕尺寸 屏幕分辨率 屏幕像素密度 屏幕尺寸 屏幕尺寸指屏幕的对角线的物理长度 单位是英寸 1英寸 2 54厘米 比如常见的屏幕尺寸 5 0 5 99 6 0等等 屏幕分辨率 屏幕分辨率是
  • java基础 谈谈方法?

    1 什么是方法 方法是类或对象的行为特征的抽象 是类或者对象中最重要的组成部分 谈到类时 组成部分就是两块 属性 方法 如果是学过c语言的同学 方法就像是函数 需要注意的是 方法在java中不能独立存在 需要定义在类中 或依附于类 或依附于
  • 第七章 区分鸟和飞机

    本章主要内容 1 构建前馈神经网络 2 使用Dataset和DataLoader加载数据 3 了解分类损失 1 cifar10数据集 1 1 数据集下载 Cifar10数据集 下载数据集 from torchvision import da
  • java代码如何读取一个JVM的参数呢?

    下文笔者将使用java代码读取JVM参数的方法分享 如下所示 实现思路 使用 ManagementFactory getRuntimeMXBean 中的getInputArguments 方法即可获取JVM运行时的参数 package co
  • ubuntu nginx 安装和启动和自启动

    ngx http core module 模块http tengine taobao org nginx docs cn docs http ngx http core module html 目录 1前置依赖软件 Linux 安装 mys
  • python开发需要掌握哪些知识-Python的8个基础知识点,新手必须背下来!

    Python是一个面向对象的解释型的交互式高级脚本语言 Python被设计成一种高可读性的语言 因为它大量地使用了英语中的单词作为关键字 而且不像其他语言使用标点符号构成复杂的语法结构 Python的语法结构非常少 Python是一种面向对
  • 全新推出Bard,谷歌google或许可以靠它打败微软OpenAI ChatGPT

    目录 前言 Bard优势 Bard新功能 更直观的Bard互动 Bard深度集成google search Help me write in Gmail 谷歌地图路线的全新沉浸式视图 谷歌照片全新Magic Editor体验 Bard与其他
  • vue监听本地存储token不存在自动刷新页面

    我们在代码编写的时候 为了更好的体验 有时候需要清除本地存储的token来自动刷新页面跳到登陆页面 这时候就需要一个监听器来监听本地存储的变化来执行操作 下面我们会用到一个JavaScript的addEventListener 事件监听方法