前端面试项目细节重难点分享(十三)

面试题提问:分享你最近做的这个项目,并讲讲该项目的重难点?


答:最近这个项目是一个二次迭代开发项目,迭代周期一年,在做这些任务需求时,确实有很多值得分享的印象深刻的点,我讲讲下面这点吧!


(1)是什么?


无感刷新登录:在用户登录状态即将过期时,系统自动刷新用户的登录状态,而无需用户手动重新登录。


(2)为什么?


用户体验好:用户无需因会话过期而重新登录。
减少登录操作:降低用户操作成本,提高应用的可用性。


减少用户流失:用户在操作过程中不会因为会话过期而被强制登出,减少了因登录问题导致的用户流失。


(3)怎么做?


双Token机制:包括访问令牌(Access Token)和刷新令牌(Refresh Token)。


访问令牌(Access Token):用于用户请求访问受保护资源时的认证。它通常具有较短的有效期。


刷新令牌(Refresh Token):用于在访问令牌过期时获取新的访问令牌,有效期较长。


(4)代码实现?


第1步:后端设置:确保后端支持生成和验证访问令牌(Access Token)和刷新令牌(Refresh Token)。通常,后端会在用户登录时返回这两种令牌。


第2步:前端存储令牌:在Vue应用中,可以使用localStorage或sessionStorage来存储这些令牌。

第3步:请求拦截器:使用axios的请求拦截器来自动添加访问令牌到每个HTTP请求中。

第4步:响应拦截器:使用axios的响应拦截器来处理访问令牌过期的情况。【这步是关键步骤噢!】

第5步:刷新令牌的API:后端需要提供一个API来接收刷新令牌并返回新的访问令牌。

第6步:登录逻辑:在用户登录时,获取并存储访问令牌和刷新令牌。

第7步:退出登录:退出登录时,清除存储的令牌。

3758d92a619b4f00b28afaa6d3be80f8.jpg

79b3547111e34ebfad05e9606f4ba305.jpg 

5562815e8df3482cb13eb303ae586065.jpg 

abf857588fa74763ab3fd30c462043f0.jpg 

8c80e1bbd3ed4a9cbd76f61da1b432c0.jpg 

 更多详情:爱米的前端小笔记(csdn~xitujuejin~zhiHu~Baidu~小红shu)同步更新,等你来看!都是利用下班时间整理的,整理不易,大家多多👍💛➕🤔哦!你们的支持才是我不断更新的动力!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【中项】系统集成项目管理工程师-第5章 软件工程-5.3软件设计

前言:系统集成项目管理工程师专业,现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试,全称为“全国计算机与软件专业技术资格(水平)考试”&…

设计模式|观察者模式

观察者模式是一种行为设计模式,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。当主题对象发生变化时,它的所有观察者都会收到通知并更新。观察者模式常用于实现事件处理系统、发布-订阅模式等。在项目中&#xff0c…

【spring boot】初学者项目快速练手

项目视频:一小时带你从0到1实现一个SpringBoot项目开发_哔哩哔哩_bilibili 注解视频:10、Java高级技术:注解:认识注解_哔哩哔哩_bilibili 一、基础知识 1.注解Annotation (1)定义 注解是Java代码里的特…

Wordpress安装到win10(2024年7月)

目录 1.wordpress介绍 2下载应用 2.1.wordpress 2.2XAMPP 2.3 PHPmyadmin 3.配置应用 3.1XAMPP进程 3.2 文件配置 3.3 phpmyadmin配置 4.配置网页 4.1 数据库创建 4.2 安装wordpress 5.进入面板 6.总结 1.wordpress介绍 WordPress是一个开源内容管理系统&#xff0…

Node.js知识点总结

Node.js知识点总结 Node.js其本质和浏览器一样是一个JavaScript运行环境。浏览器的运行环境为V8引擎浏览器内置API(BOM、DOM、Canvas);而node.js的运行环境是V8引擎node提供的API(fs、path、http)。它使JavaScript可以编写后端。 基本知识 fs文件系统模块 它提供一…

C语言·分支和循环语句(超详细系列·全面总结)

前言:Hello大家好😘,我是心跳sy,为了更好地形成一个学习c语言的体系,最近将会更新关于c语言语法基础的知识,今天更新一下分支循环语句的知识点,我们一起来看看吧~ 目录 一、什么是语句&#xf…

剪画小程序:短视频搬运必备!去除视频字幕!

在这个人人都自媒体的盛世,新人想要创作爆款视频那里难上加难,所以搬运视频就成了很多新手自媒体人的不二选择。 搬运优质内容成为许多人的需求。但原视频中的字幕往往成为困扰大家的难题。 你是否曾为了搬运一个精彩的短视频,却因为无法去除…

gitee设置ssh公钥密码避免频繁密码验证

gitee中可以创建私有项目,但是在clone或者push都需要输入密码, 比较繁琐。 公钥则可以解决该问题,将私钥放在本地,公钥放在gitee上,当对项目进行操作时带有的私钥会在gitee和公钥进行验证,避免了手动输入密…

CTF-Web习题:[GXYCTF2019]Ping Ping Ping

题目链接:[GXYCTF2019]Ping Ping Ping 解题思路 访问靶机,得到如下页面,类似于URL参数 尝试用HackBar构造url传输过去看看 发现返回了ping命令的执行结果,可以猜测php脚本命令是ping -c 4 $ip,暂时不知道执行的函数…

【Android】数据存储方案——文件存储、SharedPreferences、SQLite数据库用法总结

文章目录 文件存储存储到文件读取文件 SharedPreferences存储存储获取SharedPreferences对象Context 类的 getSharedPreferences() 方法Activity 类的 getPreferences() 方法PreferenceManager 类中的 getDefaultSharedPreferences() 方法 示例 读取记住密码的功能 SQLite数据库…

通信协议_C#实现CAN通信

CAN协议 CAN(Controller Area Network)即控制器局域网络。特点: 多主网络:网络上的任何节点都可以主动发送数据,不需要一个固定的主节点。双绞线:使用双绞线作为通信介质,支持较远的通信距离。…

挑战房市预测领头羊:KNN vs. 决策树 vs. 线性回归

挑战房市预测领头羊(KNN,决策树,线性回归) 1. 介绍1.1 K最近邻(KNN):与邻居的友谊1.1.1 KNN的基础1.1.2 KNN的运作机制1.1.3 KNN的优缺点 1.2 决策树:解码房价的逻辑树1.2.1 决策树的…

kafka服务介绍

kafka 安装使用管理 Kafka Apache Kafka 是一个开源的分布式事件流平台,主要用于实时数据传输和流处理。它最初由 LinkedIn 开发,并在 2011 年成为 Apache 基金会的顶级项目。Kafka 设计的目标是处理大规模的数据流,同时提供高吞吐量、低延迟…

shopee虾皮 java后端 一面面经 整体感觉不难

面试总结:总体不难,算法题脑抽了只过了一半,面试官点出了问题说时间到了,反问一点点,感觉五五开,许愿一个二面 1.Java中的锁机制,什么是可重入锁 Java中的机制主要包括 synchronized关键字 Loc…

SpringBoot整合elasticsearch-java

一、依赖 系统使用的是ElasticSearch8.2.0 <dependency><groupId>co.elastic.clients</groupId><artifactId>elasticsearch-java</artifactId><version>8.1.0</version> </dependency> 二、配置 1、yml文件配置 elastics…

SpringBoot入门:如何新建SpringBoot项目(保姆级教程)

在本文中&#xff0c;我们将演示如何新建一个基本的 Spring Boot 项目。写这篇文章的时候我还是很惊讶的&#xff0c;因为我发现有些java的初学者&#xff0c;甚至工作10年的老员工居然并不会新建一个SpringBoot项目&#xff0c;所以特别出了一篇文章来教大家新建一个SpringBoo…

关于pycharm上push项目到gitee失败原因

版权声明&#xff1a;本文为博主原创文章&#xff0c;如需转载请贴上原博文链接&#xff1a;https://blog.csdn.net/u011628215/article/details/140577821?spm1001.2014.3001.5502 前言&#xff1a;最近新建项目push上gitee都没有问题&#xff0c;但是当在gitee网站进行了一个…

基于 HTML+ECharts 实现监控平台数据可视化大屏(含源码)

构建监控平台数据可视化大屏&#xff1a;基于 HTML 和 ECharts 的实现 监控平台的数据可视化对于实时掌握系统状态、快速响应问题至关重要。通过直观的数据展示&#xff0c;运维团队可以迅速发现异常&#xff0c;优化资源配置。本文将详细介绍如何利用 HTML 和 ECharts 实现一个…

CefSharp音视频编译与免费下载

注&#xff1a;Cefharp 音频和视频播放编译&#xff0c;生成相应的dll文件&#xff0c;从而支持项目开发。 建议编译至少 16G 的 RAM和至少 250G 的 SSD。该脚本以 E 盘为例&#xff0c;您需要在 E 盘上手动创建 cef 文件夹。禁止在转载后通过发布其他平台向用户收取下载费用。…

【Qt 】JSON 数据格式详解

文章目录 1. JSON 有什么作用?2. JSON 的特点3. JSON 的两种数据格式3.1 JSON 数组3.2 JSON 对象 4. Qt 中如何使用 JSON 呢&#xff1f;4.1 QJsonObject4.2 QJsonArray4.3 QJsonValue4.4 QJsonDocument 5. 构建 JSON 字符串6. 解析 JSON 字符串 1. JSON 有什么作用? &#x…