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

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


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


(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)同步更新,等你来看!都是利用下班时间整理的,整理不易,大家多多👍💛➕🤔哦!你们的支持才是我不断更新的动力!

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

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

相关文章

go语言学习文档精简版

Go语言是一门开源的编程语言,目的在于降低构建简单、可靠、高效软件的门槛。Go平衡了底层系统语言的能力,以及在现代语言中所见到的高级特性。 你好,Go package main // 程序组织成包import "fmt" // fmt包用于格式化输出数据// …

排序算法详解

​ 💎所属专栏:数据结构与算法学习 💎 欢迎大家互三:2的n次方_ 🍁1. 插入排序 🍁1.1 直接插入排序 插入排序是一种简单直观的排序算法,它的原理是通过构建有序序列,对于未排序数…

使用 Visual Studio 2022 自带的 cl.exe 测试编译 opencv helloworld

1. 参考博客&#xff1a;https://blog.csdn.net/yangSHU21/article/details/130237669( 利用OpenCV把一幅彩色图像转换成灰度图 )( 代码用的此博客的&#xff0c;就改了下图片文件路径而已 )。 2. 编译探索步骤&#xff1a; test.cpp&#xff1a; #include <iostream>…

Golang | Leetcode Golang题解之第283题移动零

题目&#xff1a; 题解&#xff1a; func moveZeroes(nums []int) {left, right, n : 0, 0, len(nums)for right < n {if nums[right] ! 0 {nums[left], nums[right] nums[right], nums[left]left}right} }

单证不一致清关难题 | 国际贸易综合服务平台 | 箱讯科技

什么是单证一致&#xff1f; 单证一致出口方所提供的所有单据要严格符合进口方开证银行所开信用证的要求&#xff0c;或者说出口方制作和提供的所有与本项货物买卖有关的单据&#xff0c;与进口方申请开立的信用证对单据的要求完全吻合&#xff0c;没有矛盾。 添加图片注释&am…

【Stable Diffusion】(基础篇四)—— 模型

模型 本系列博客笔记主要参考B站nenly同学的视频教程&#xff0c;传送门&#xff1a;B站第一套系统的AI绘画课&#xff01;零基础学会Stable Diffusion&#xff0c;这绝对是你看过的最容易上手的AI绘画教程 | SD WebUI 保姆级攻略_哔哩哔哩_bilibili 本文主要讲解如何下载和使…

Spire.PDF for .NET【文档操作】演示:在 PDF 中添加、隐藏或删除图层

PDF 图层是一种将 PDF 文件的内容按图层排列的功能&#xff0c;允许用户在同一个 PDF 文件中选择性地将某些内容设置为可见&#xff0c;将其他内容设置为不可见。PDF 图层是分层艺术品、地图和 CAD 图纸中使用的常见元素。本文将演示如何使用Spire.PDF for .NET以编程方式在 PD…

分类常用的评价指标-二分类/多分类

二分类常用的性能度量指标 精确率、召回率、F1、TPR、FPR、AUC、PR曲线、ROC曲线、混淆矩阵 「精确率」查准率 PrecisionTP/(TPFP) 「召回率」查全率RecallTP/(TPFN) 「真正例率」即为正例被判断为正例的概率TPRTP/(TPFN) 「假正例率」即为反例被判断为正例的概率FPRFP/(TNFP)…

唯众物联网(IOT)全功能综合实训教学解决方案

一、引言 在信息技术日新月异的今天&#xff0c;物联网&#xff08;IoT&#xff09;作为推动数字化转型的关键力量&#xff0c;其触角已延伸至我们生活的方方面面&#xff0c;深刻地重塑了工作模式、生活习惯乃至社会结构的每一个角落。面对这一前所未有的变革浪潮&#xff0c…

Java的类加载机制

Java的类加载机制是指将类的字节码文件&#xff08;.class文件&#xff09;加载到JVM中并将其转换为Class对象的过程。这个过程由类加载器&#xff08;ClassLoader&#xff09;完成。Java的类加载机制具有动态性和灵活性&#xff0c;使得Java能够支持动态加载类、实现模块化开发…

day4 vue2以及ElementUI

创建vue2项目 可能用到的命令行们 vue create 项目名称 // 创建项目 cd 项目名称 // 只有进入项目下&#xff0c;才能运行 npm run serve // 运行项目 D: //切换盘符 更改 Vue项目的端口配置 基础语法 项目创建完成之后&#xff0c;会有一个组件HelloWorld.vue&#xff0c;…

推动智慧交通建设,边缘计算赋能交通信号灯数据处理与决策能力

随着智慧城市建设的快速发展&#xff0c;智慧交通已成为城市发展的重要组成项目。智慧交通旨在通过大数据、人工智能、物联网等先进技术&#xff0c;实现交通系统的全面感知、智能分析、主动服务和协同管理。边缘计算在交通信号灯物联网应用中展现了交通信号灯数据处理与决策能…

手机怎么设置不同的ip地址

在数字化日益深入的今天&#xff0c;智能手机已成为我们生活、工作和学习中不可或缺的设备。然而&#xff0c;随着网络应用的广泛和深入&#xff0c;我们有时需要为手机设置不同的IP地址来满足特定需求。比如&#xff0c;避免网络限制、提高网络安全、或者进行网络测试等。本文…

内网对抗-隧道技术篇防火墙组策略HTTP反向SSH转发出网穿透CrossC2解决方案

知识点&#xff1a; 1、C2/C2上线-CrossC2插件-多系统平台支持 2、隧道技术篇-应用层-SSH协议-判断&封装&建立&穿透 3、隧道技术篇-应用层-HTTP协议-判断&封装&建立&穿透隧道技术主要解决网络通讯问题&#xff1a;遇到防火墙就用隧道技术&#xff0c;…

Ubuntu设置网络

进入网络配置文件夹 cd /etc/netplan 使用 vim 打开下的配置文件 打开后的配置 配置说明&#xff1a; network:# 网络配置部分ethernets:# 配置名为ens33的以太网接口ens33:addresses:# 为ens33接口分配IP地址192.168.220.30&#xff0c;子网掩码为24位- 192.168.220.30/24n…

软考-软件设计师(3)-数据结构与算法:树、图、队列、查找算法、排序算法、霍夫曼编码/树、环路复杂性、算法/时间复杂度/空间复杂度等高频考点

场景 软考-软件设计师-数据结构与算法模块高频考点整理。 以下为高频考点、知识点汇总,不代表该模块所有知识点覆盖,请以官方教程提纲为准。 注: 博客:霸道流氓气质-CSDN博客 实现 知识点 树:节点的度、树的度、深度、高度、满二叉树、完全二叉树、平衡二叉树、B树…

利用宝塔部署前后端分离springboot项目,以EasyPan为例

前置准备 服务器购买 请参考其他教程&#xff0c;这里不再赘述。 项目 部署到服务器前请确保项目在本地运行正常 安装宝塔面板 宝塔Linux面板的安装配置以及基本使用教程&#xff08;超详细&#xff09;_宝塔linux面板新手使用教程-CSDN博客 sql文件 IDEA中怎样导出数据…

删除的视频怎样才能恢复?详尽指南

在日常生活中&#xff0c;我们有时会不小心删除一些重要的视频文件&#xff0c;或者在整理存储空间时不慎丢失了珍贵的记忆片段。这时候&#xff0c;我们可以通过一些数据恢复工具和技巧&#xff0c;找回这些被删除的视频。本文将详细介绍几种常见且有效的视频恢复方法&#xf…

Vue与ASP.NET Core Web Api设置localhost与本地ip地址皆可访问

Vue的设置 我们创建并启动一个Vue项目&#xff0c;如下所示&#xff1a; 打开cmd&#xff0c;输入ipconfig查询本地ip地址&#xff1a; 想通过本地ip地址访问&#xff0c;把localhost改成本地ip地址&#xff0c;发现打不开&#xff1a; 这是因为Vue项目默认只有localhost&…

【Linux】进程IO|重定向|缓冲区|dup2|dup|用户级缓冲区|模拟缓冲区

目录 前言 重定向 实验一 为什么log.txt文件的文件描述符是1 为什么向stdout打印的信息也出现在文件中 实验二 用户级缓冲区 为什么要有用户级缓冲区 系统调用 dup 为什么close(fd1)之后还能向log.txt写入数据&#xff1f; dup2 缓冲区 观察现象 测试1 测试2 测…