黑马头条vue2.0项目实战(十一)——功能优化(组件缓存、响应拦截器、路由跳转与权限管理)

1. 组件缓存

1.1 介绍

先来看一个问题?

从首页切换到我的,再从我的回到首页,我们发现首页重新渲染原来的状态没有了。

首先,这是正常的状态,并非问题,路由在切换的时候会销毁切出去的页面组件,然后渲染匹配到的页面组件。

但是我想要某些页面保持状态,而不会随着路由切换导致重新渲染。

1.2 使用 keep-alive 缓存组件

官方文档:在动态组件上使用 keep-alive

<keep-alive> 主要用于保留组件状态或避免重新渲染,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

(1)组件缓存不是持久化,它只是在应用运行期间不会重新渲染,如果页面刷新还是会回到初始状态。

(2)<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。

(3)<keep-alive> 要求被切换到的组件都有自己的名字,不论是通过组件的 name 选项还是局部/全局注册。

(4)组件生命周期钩子和缓存

具体使用要根据实际情况来处理,在我们项目后续的业务功能中慢慢体会。

(5)includeexclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b"><component :is="view"></component>
</keep-alive><!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/"><component :is="view"></component>
</keep-alive><!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']"><component :is="view"></component>
</keep-alive>
  • 匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。
  • 参考阅读
  • 在动态组件上使用 keep-alive
  • 内置的组件 keep-alive

1.3 项目中的缓存配置

参考链接:

  • https://juejin.cn/post/6844903887040675854vue项目实现缓存的最佳方案https://juejin.cn/post/6844903887040675854

① 在 App.vue 对根路由组件启用组件缓存

② 在 views/tabbar/index.vue 对子路由也启用组件缓存

1.4 解决缓存之后我的页面用户数据不更新问题

将原来 created 中的逻辑代码写到 activated 中:

activated () {if (this.user) {this.loadUserInfo()}
},

2. 处理 token 过期

参考链接:

  • vue中Axios的封装和API接口的管理
// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 响应成功进入这个函数return response;
}, async function (error) {// 响应失败进入这个函数,超出 2.xx 的状态码都会进入这里// console.log(error.response.status)const status = error.response.statusif (status === 400) {//  客户端请求参数异常Toast.fail('客户端请求参数异常。')} else if (status === 401) {  // token 无效,过期// 如果没有 user或者 user.token,直接去登录const user = store.state.userif (!user || !user.token) {// replace 方法不会形成历史记录,push 会形成历史记录redirectLogin()return }// 使用 refresh_token,则请求获取新的 tokentry {const res = await refreshTokenRequest(user.refresh_token)// 拿到新的 token 之后把它更新到容器之中user.token = res.data.data.tokenstore.commit('setUser', user)// 把失败的请求重新发出去 error 是本次请求的相关配置对象return axios(error.config)} catch (err) {// token 刷新失败,直接跳转登录页面redirectLogin()}} else if (status === 403) {Toast.fail('没有权限操作。')} else if (status >= 500) {// 服务端异常Toast.fail('服务端异常。')}return Promise.reject(error);
});const refreshTokenRequest = (refresh_token) => {return axios({url: 'https://toutiao.itheima.net/v1_0/authorizations',method: 'PUT',headers: {'Content-Type': 'application/x-www-form-urlencoded',Authorization: 'Bearer' + ' ' + refresh_token}})
}
const redirectLogin = () => {// router.currentRoute 当前路由对象,和你在组件中访问的 this.$route 是同一个东西// query 参数的数据格式就是:?key=value&key=valuerouter.replace({name: 'login',query: {redirect: router.currentRoute.fullPath}})
}

3. 登录成功跳转回原来页面

4. 处理页面的访问权限

① 给需要登录状态才能访问的页面路由对象的 meta 中添加配置属性

② 通过路由拦截器统一校验

  • 路由拦截器

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

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

相关文章

Java之HashMap的底层实现

Java之HashMap的底层实现 摘要HashMap的底层原理哈希值转换为数组下标节点初始化put(Object key, Object value)重写toString()get(Object key)增加泛化remove(K key) 摘要 本博客主要讲述了Java的HashMap的底层实现 HashMap的底层原理 底层原理&#xff1a;数组链表 过程…

【ARM 芯片 安全与攻击 5.6 -- 侧信道与隐蔽信道的区别】

文章目录 侧信道与隐蔽信道的区别侧信道攻击(Side-channel Attack)侧信道攻击简介侧信道攻击 使用方法侧信道攻击示例隐蔽信道(Covert Channel)隐蔽信道简介隐蔽信道使用方法隐蔽信道代码示例侧信道与隐蔽信道在芯片及系统安全方面的使用侧信道的应用隐蔽信道的应用Summary…

【C/C++】菱形继承问题

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

python进阶语法---异常处理

在 Python 中&#xff0c;异常处理是一种机制&#xff0c;用于处理程序运行时可能发生的错误&#xff0c;以确保程序能够优雅地处理错误情况&#xff0c;而不是直接崩溃。异常处理机制的核心是使用 try、except、else 和 finally 语句。 一、基础语法 异常处理的基本语法如下…

【JAVA CORE_API】Day18 网络编程、线程、在线聊天室v1.0

C/S&#xff1a;客户端/服务器端&#xff0c;所有网络应用都是基于客户端服务器端进行的&#xff0c;Java写的是服务端&#xff0c;客户端是一个软件&#xff0c;服务端也是一个软件&#xff0c;两个软件之间交互&#xff1b;&#xff08;只能连接对应的服务器&#xff09; B/…

深度学习-k-mean实现聚类

对模拟函数生成的随机数据&#xff0c;分为三个族群。 1.生成数据 设定样本数量、特征数、族群数&#xff0c;以及簇内标准差之后&#xff0c;通过make_blobs生成随机数据。 scikit-learn库中的make_blobs函数来生成模拟数据集的&#xff0c;用于创建多类单标签数据集&#…

吐血整理 ChatGPT 3.5/4.0/4o 新手使用手册~

都知道ChatGPT很强大&#xff0c;聊聊天、写论文、搞翻译、写代码、写文案、审合同等等&#xff0c;无所不能~ 那么到底怎么使用呢&#xff1f;其实很简单了&#xff0c;国内AI产品发展也很快&#xff0c;很多都很好用了~ 我一直在用&#xff0c;建议收藏下来~ 有最先进、最…

基于 Appium 的 App 爬取实战

除了运行 Appium 的基本条件外&#xff0c;还要一个日志输出库 安装&#xff1a; pip install loguru 思路分析 首先我们观察一下整个 app5 的交互流程&#xff0c;其首页分条显示了电影数据&#xff0c; 每个电影条目都包括封面&#xff0c;标题&#xff0c; 类别和评分 4…

Godot《躲避小兵》实战之创建玩家场景

项目设置完之后&#xff0c;我们就可以开始处理玩家控制的角色。 这里我们将玩家放在一个单独的场景当中&#xff0c;这样做的好处是在游戏的其他部分做出来之前&#xff0c;我们就可以对其进行单独测试。 节点结构 场景是一个节点树结构&#xff0c;因此一个场景需要有一个…

GitHub每日最火火火项目(8.21)

goauthentik / authentik&#xff1a; 项目介绍&#xff1a;authentik 是一个提供认证功能的工具&#xff0c;它似乎是 GitHub 社区当前非常关注的项目。虽然关于它的具体功能和特点在给定的文本中没有详细说明&#xff0c;但可以推测它在认证方面具有重要的作用&#xff0c;可…

WordPress美化节日灯笼插件,适合春节的时候使用

源码介绍&#xff1a; WordPress美化节日灯笼插件&#xff0c;适合每年过年的时候安在网站上使用&#xff0c;这款插件可以备用着&#xff0c;一款WordPress节日灯笼美化插件&#xff0c;可以给网页自动加一个灯笼效果使用说明&#xff1a;到网站WP后台 - 插件 - 安装插件 - 上…

Linux外设接口使用及内核驱动开发---模拟Framebuffer及应用接口

文章目录 前言一、模拟Framebuffer驱动1.总体功能2.驱动代码3.简要说明二、应用层1.总体功能2. 例子代码主函数三.运行结果前言 驱动端实现Linux模拟Framebuffer驱动;应用端采用GTK+实现多个应用程序通过接口/dev/fbXXX访问Framebuffer.基于该接口,可以在PC电脑Ubuntu系统实…

[C#]基于winform结合photocartoon算法实现人物卡通化源码实现

【官方框架】 https://github.com/minivision-ai/photo2cartoon 简介 人像卡通风格渲染的目标是&#xff0c;在保持原图像ID信息和纹理细节的同时&#xff0c;将真实照片转换为卡通风格的非真实感图像。我们的思路是&#xff0c;从大量照片/卡通数据中习得照片到卡通画的映射…

企业级web应用服务器tomcat

目录 一、Web技术 1.1 HTTP协议和B/S 结构 1.2 前端三大核心技术 1.2.1 HTML 1.2.2 CSS&#xff08;Cascading Style Sheets&#xff09;层叠样式表 1.2.3 JavaScript 二、tomcat的功能介绍 2.1 安装 tomcat 环境准备 2.1.1 安装java环境 2.1.2 安装并启动tomcat …

vscode提升:JSON 中不允许有注释

解决方案 &#xff1a; 运行&#xff1a; json with comment 参考链接&#xff1a; https://blog.csdn.net/eqizhihui/article/details/134014010 人工智能学习网站 https://chat.xutongbao.top

基于飞腾平台的Hbase的安装配置

【写在前面】 飞腾开发者平台是基于飞腾自身强大的技术基础和开放能力&#xff0c;聚合行业内优秀资源而打造的。该平台覆盖了操作系统、算法、数据库、安全、平台工具、虚拟化、存储、网络、固件等多个前沿技术领域&#xff0c;包含了应用使能套件、软件仓库、软件支持、软件适…

iOS Native与JS通信:JSBridge

文章目录 一、简介二、JS 调用 Native1.使用 URL Schemea.UIWebViewb.WKWebView 2.使用 JavaScriptCore (iOS 7)3.使用 WKWebView 和 WKScriptMessageHandler (iOS 8) 三、Native 调用 JS1.使用 UIWebView2.使用 WKWebView3.使用 JavaScriptCore (iOS 7) 一、简介 对于移动应用…

深入浅出:你需要了解的用户数据报协议(UDP)

文章目录 **UDP概述****1. 无连接性****2. 尽最大努力交付****3. 面向报文****4. 多种交互通信支持****5. 较少的首部开销** **UDP报文的首部格式****详细解释每个字段** **UDP的多路分用模型****多路分用的实际应用** **检验和的计算方法****伪首部的详细内容****检验和计算步…

Python 数据分析之Numpy学习(一)

Python 数据分析之Numpy学习&#xff08;一&#xff09; 一、Numpy的引入 1.1 矩阵/向量的按位运算 需求&#xff1a;矩阵的按位相加 [0,1,4] [0,1,8] [0,2,12] 1.1.1 利用python实现矩阵/向量的按位运算 # 1.通过列表实现 list1 [0, 1, 4] list2 [0, 1, 8]# 列表使用…

iOS 18 Beta 5:苹果的细腻之笔,绘制用户体验新画卷

在苹果的世界里&#xff0c;每一次系统更新都是对用户体验进行的一次精心雕琢。 随着iOS 18 Beta 5的上线&#xff0c;苹果带来了一系列令人耳目一新的功能&#xff0c;同时也在系统的每个细微之处展现了对完美的追求。 Safari浏览器的“干扰控制”功能 在今天信息充斥的数字…