Vue3 登录成功,浏览器存在toke,再次访问/login路由到/index 首页页面

文章目录

  • 目录

    文章目录

    流程

    小结


    • 概要
    • 流程
    • 技术细节
    • 小结

概要

首先需要清楚知道浏览器localstorage和Session storage的区别

localStoragesessionStorage 是 HTML5 提供的两种客户端存储数据的方法,它们在使用和生命周期上有一些区别:

1. 生命周期

  • localStorage:存储的数据没有过期时间,除非被显式删除或者浏览器清除所有数据。因此,即使关闭了浏览器或者重新启动计算机,数据仍然会保留。

  • sessionStorage:存储的数据在当前会话结束时失效。会话结束指的是关闭了浏览器窗口(或标签页)。

2. 存储大小

  • localStorage:典型的大小限制是 5MB,这取决于浏览器。

  • sessionStorage:大小限制也在 5MB 左右,但同样取决于浏览器。

3. 访问权限

  • localStorage 和 sessionStorage 都遵循同源策略。这意味着只有相同协议、主机和端口的页面才能访问存储的数据。

4. 使用场景

  • localStorage 通常用于持久保存用户的设置或者登录凭证等数据,以便用户下次访问时仍然可以使用。

  • sessionStorage 则更适合存储当前会话中的数据,当用户在当前标签页或者窗口中进行页面跳转时保持数据不变。

5. API 使用

两者的 API 使用基本相同:

// 设置数据 localStorage.setItem('key', 'value'); 
sessionStorage.setItem('key', 'value'); // 获取数据 
const valueFromLocalStorage = localStorage.getItem('key'); 
const valueFromSessionStorage = sessionStorage.getItem('key'); // 删除数据 localStorage.removeItem('key'); 
sessionStorage.removeItem('key'); // 清空所有数据 
localStorage.clear(); 
sessionStorage.clear();

总结

  • localStorage 和 sessionStorage 都提供了在客户端存储数据的方法,但其生命周期和使用场景有所不同。
  • localStorage 适合长期保存的数据,不受会话结束影响。
  • sessionStorage 适合在会话期间保存的数据,会话结束时数据自动清除。

流程

以下的配置 都是router文件下的index.js

第二个是判断如果

localStorage.getItem("token") 存在浏览器localStorage有token说明已经登录就会跳转到/index页面,否则后面
next(); // 放行

第二步骤是   《main.js 》 文件的操作

技术细节

小结

不是很明白的可以留言私信作者帮你解答问题,或者指出哪里不是很清楚,作者重新修改文章的步骤和截图方式,谢谢各位的理解

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/864227.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

@Cacheable解决复杂对象形参导致的缓存失效问题(如Map参数)

在Spring中使用 Cacheable 注解可以非常方便地实现方法的自动缓存机制。如以下代码: Cacheable(value "YwtbToken", key "#p0") public String createToken(String dlzh) {...}但当Cacheable 注解修饰的方法参数使用了复杂对象,如…

物联网数据可视化利器:云组态设计器全新升级

数据可视化已成为数据展示与分析领域非常重要的工具。由多种图表、3D图形组成的大屏能够帮助用户非常直观简洁地了解数据。在物联网环境下,用户在制作数据展示大屏时,对数据可视化工具提出了更高的要求,例如能够展示3D组件、灵活的图层结构、支持多种数据源、实时的数据更新、图…

函数创建单链表---无n型,需要 while 循环 + scanf

题目&#xff1a; #include <stdlib.h> struct link{int data;struct link *next; }; struct link* creatLink(); int main(){struct link *head,*p;headcreatLink();for(phead->next ;p;pp->next )printf("%d ",p->data );return 0; }/* 请在这里填…

软考《信息系统运行管理员》-2.1信息系统运维的管理

2.1信息系统运维的管理 信息系统运维管理体系框架 信息系统运维管理主要流程的目标 标准化&#xff1a;通过流程框架&#xff0c;构件标准的运维流程流程化&#xff1a;将大部分运维工作流程化&#xff0c;确保工作可重复&#xff0c;并且这些工作都有质量的完成&#xff0c;…

线性代数|机器学习-P20鞍点和极值

文章目录 1 . 瑞利商的思考1.1 瑞利商的定义1.2 投影向量 2. 拉格朗日乘子法3. 鞍点4. 线性拟合4.1 范德蒙矩阵线性拟合4.2 python 代码4.3 范德蒙矩阵缺点 5. 均值和方差5.1 样本均值和方差5.2 总体期望 μ \mu μ,总体方差 σ 2 \sigma^2 σ2 1 . 瑞利商的思考 1.1 瑞利商…

MySQL学习(6):SQL语句之数据控制语言:DCL

DCL用来管理数据库用户&#xff0c;控制数据库的访问权限 1.管理用户 1.1查询用户 use mysql; select * from user; #用户信息都存放在系统数据库mysql的user表中 在user表中&#xff0c;一个用户是由用户名和主机名共同决定的&#xff0c;上图中的host一栏就是用户的主机名…

常用组件详解(二):torchsummary

文章目录 一、基本使用二、常见指标2.1Input size2.2Forward/backward pass size 一、基本使用 torchsummary库是一个好用的模型可视化工具&#xff0c;用于帮助开发者把握每个网络层级的细节&#xff0c;包括其中的连接和维度。使用方法&#xff1a; from torchsummary impor…

ubuntu 安装docker

目录 docker 打包与加载 加载 Docker 镜像&#xff1a; ubuntu 安装docker 系统版本 检查卸载老版本docker 安装步骤 运行docker docker 打包与加载 打包成 .tar 文件&#xff1a; tar -cvf my-docker-image.tar * 加载 Docker 镜像&#xff1a; docker load -i my-d…

Access Levels in Swift

Access Levels (访问级别) Swift provides six different access levels for entities(实体) within your code. These access levels are relative to the source file in which an entity is defined, the module(模块) that source file belongs to, and the package that …

分享一个超级实用的东西——巴比达远程访问

前言 &#x1f388;家人们&#xff0c;今天我要和你们分享一个超级实用的东西——巴比达远程访问&#xff01;&#x1f389; &#x1f4bb;有了它&#xff0c;无论你身在何处&#xff0c;都能轻松访问家中的电脑&#x1f4bb;&#xff0c;就像在身边一样方便&#xff01;&…

短视频电商源码如何选择

在数字时代的浪潮下&#xff0c;短视频电商以其直观、生动、互动性强的特点&#xff0c;迅速崛起成为电商行业的一股新势力。对于有志于进军短视频电商领域的创业者来说&#xff0c;选择一款合适的短视频电商源码至关重要。本文将从多个角度探讨如何选择短视频电商源码&#xf…

携程礼品卡能转出去吗?

携程的卡好像只能在旅游的时候用 像买车票啊&#xff0c;机票啊&#xff0c;酒店&#xff0c;景点门票啥的&#xff0c;但是如果我没有出游计划的话 这个卡是不是就要被闲置下来&#xff1f; 这个问题一直让我感到很苦恼&#xff0c;还好有收卡云&#xff0c;不然我的携程卡…

模型部署:C++libtorch实现全连接模型10分类和卷积模型ResNet18的四分类的模型部署推理

Clibtorch实现模型部署推理 模型 全连接模型&#xff1a;公开mnist手写识别数字的十分类卷积模型&#xff1a;自行采集的鲜花四分类 部署 语言环境&#xff1a;C 对比Python python是解释性语言&#xff0c;效率很慢&#xff0c;安全性很低 系统开发一般是java、C/C&…

在 CentOS 上安装 Docker Engine

前言 Docker 是啥之类的就不必多说了&#xff0c;直接上安装步骤。 官网安装教程地址&#xff1a;https://docs.docker.com/engine/install/centos/ 1.Uninstall old versions &#xff08;卸载旧版本&#xff09; Older versions of Docker went by docker or docker-engin…

NLP特征提取的惊人历史演变

NLP特征提取的惊人演变 1.理解特征提取2. 文本表示的演变2.1.词袋的简单性2.2. N-Gram 模型的进步2.3. TF-IDF 的崛起 3. 深入研究词嵌入3.1.探索 Word2Vec3.2.深入了解 GloVe3.3.深入研究 FastText 4. 上下文嵌入的影响4.1 ELMo 的突破4.2 理解 BERT 的机制4.3 Transformer的出…

44 - 50题高级字符串函数 / 正则表达式 / 子句 - 高频 SQL 50 题基础版

目录 1. 相关知识点2.例子2.44 - 修复表中的名字2.45 - 患某种疾病的患者2.46 - 删除重复的电子邮箱2.47 - 第二高的薪水2.48 - 按日期分组销售产品2.49 - 列出指定时间段内所有的下单产品2.50 - 查找拥有有效邮箱的用户 1. 相关知识点 相关函数 函数含义concat()字符串拼接upp…

Ollama中文版部署

M1部署Ollama Ollama中文网站: Featured - 精选 - Ollama中文网 下载网址: Download Ollama on macOS 安装后运行llma3模型: ollama run llama3:8b 界面使用: GitHub - open-webui/open-webui: User-friendly WebUI for LLMs (Formerly Ollama WebUI) 部署open-webui: do…

烟台网站建设前需要了解哪些

在进行烟台网站建设之前&#xff0c;需要了解以下几个重要的方面&#xff1a; 1. 目标和定位&#xff1a;在建设网站之前&#xff0c;需要明确网站的目标和定位。是为了展示公司业务&#xff0c;还是为了销售产品&#xff0c;或者是为了提供信息和服务等。根据不同的目标和定位…

界面组件DevExpress WPF v24.1 - 增强的可访问性 UI自动化

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 DevExpress WPF控件日…

mqtt介绍和环境安装

Mqtt介绍 MQTT是机器对机器(M2M)/物联网(IoT)连接协议。它被设计为一个极其轻量级的发布/订阅消息传输协议。对于需要较小代码占用空间和/或网络带宽非常宝贵的远程连接非常有用&#xff0c;是专为受限设备和低带宽、高延迟或不可靠的网络而设计。 下载一个开源的emqx服务器和…