Vuex在项目中使用

案例1:

在这里插入图片描述

案例2:

Token 是用户登录成功之后服务端返回的一个身份令牌,在项目中的多个业务中需要使用到

校验页面的访问权限
访问需要授权的 API 接口

但是我们只有在第一次用户登录成功之后才能拿到 Token。

所以为了能在其它模块中获取到 Token 数据,我们需要把它存储到一个公共的位置,方便随时取用。

往哪儿存?

  1. 本地存储(不推荐)
    获取麻烦
    数据不是响应式

  2. Vuex 容器(推荐)
    获取方便
    响应式的

使用容器存储 Token 的思路:
在这里插入图片描述

登录成功,将 Token 存储到 Vuex 容器中

  1. 获取方便
  2. 响应式

为了持久化,还需要把 Token 放到本地存储
持久化

下面是具体实现。
在这里插入图片描述

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

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

相关文章

Vue移动端项目——Vant 移动端 REM 适配

Vant官方文档 Vant 中的样式默认使用 px 作为单位,如果需要使用 rem 单位,推荐使用以下两个工具: postcss-pxtorem 是一款 postcss 插件,用于将 px 单位转化为 rem lib-flexible 用于设置 rem 基准值 下面我们分别将这两个工具配…

Win7_刻录DVD

1、刻录 临时文件夹: 1.1、C:\Users\具体的用户名\AppData\Local\Microsoft\Windows\Burn 1.2、双击 插入刻录盘的光驱,直接将文件复制到 这里,实际上也就是 复制到 上面的文件夹中。 2、UltraISO 的 路径: C:\Users\33\AppData\L…

findbugs使用_FindBugs,一个帮你找bug的IDEA插件

前言 Findbugs很多人都并不陌生,Eclipse中有插件可以帮助查找代码中隐藏的bug,IDEA中也有这款插件。这个插件可以帮助我们查找隐藏的bug,比较重要的功能就是查找潜在的null指针。 在编写代码的过程中,我们可能不会一直记得检查空的引用,在我们测试时可能…

Vue移动端项目——字体图标的使用

使用 iconfont 制作字体图标 设计师为我们单独提供了设计稿中的图标,为了方便使用,我们在这里把它制作为字体图标。 制作字体图标的工具有很多,在这里我们推荐大家使用:https://www.iconfont.cn/。 (1)登…

docker 虚拟机搭建mongodb一主一从一复制_云计算学习路线图素材课件:Docker容器应用场景分析...

Docker容器是一个开源的应用容器引擎,它能够自动执行重复性任务,例如搭建和配置开发环境,用户可以方便地创建和使用容器,还可以进行版本管理、复制、分享、修改。有很多初学云计算的同学不清楚Docker容器的使用方法以及应用场景&a…

Vue项目中 css样式的作用域(深度作用选择器)

vue官方文档 父组件对子组件设置的样式,只能作用到子组件的根节点上!!!

git 提交文件_git原理与实战

一,序言之前在工作中也接触过git,但是没有在现公司这里用的功能这么多。主要的差异体现在如下两个方面:1,之前公司使用git主要基于图形用户界面,这对于处理冲突非常有帮助,不太容易改错地方;而现…

CSS——设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child)

设置第一个以外的元素样式:not(:first-child),设置最后一个除外的元素样式:not(:last-child)

CPU结构与指令执行过程简介

CPU(Central Processing Unit)是计算机中进行算术和逻辑计算处理指令的主要部件. CPU结构 CPU由通用寄存器组,运算器,控制器和数据通路等部件组成. 寄存器包括 数据寄存器: AX,BX,CX,DX; 指针与变址寄存器:SP, BP, SI,…

mysql连接池_数据库技术:数据库连接池,Commons DbUtils,批处理,元数据

Database Connection PoolIntroduction to Database Connection Pool实际开发中“获得连接”或“释放资源”是非常消耗系统资源的两个过程,为了解决此类性能问题,通常情况我们采用连接池技术,来共享连接 Connection。这样我们就不需要每次都创…

关于第三方图片资源403问题

为什么文章列表数据中的好多图片资源请求失败返回 403? 这是因为我们项目的接口数据是后端通过爬虫抓取的第三方平台内容,而第三方平台对图片资源做了防盗链保护处理。 1. 第三方平台怎么处理图片资源保护的? 服务端一般使用 Referer 请求头…

hdfs复制文件夹_HDFS常用命令

一.HDFS命令行Hadoop help命令的使用1.hadoop -help查询所有Hadoop Shell支持的命令2.distcp这是Hadoop下的一个分布式复制程序,可以在不t同的HDFS集群间复制数据,也可以在本地文件间复制数据。hadoop distcp将/test/test.txt文件复制到/test/cp下面&…

处理相对时间(Day.js、Moment.js)(案例:结合vue的过滤器使用)

推荐两个第三方库: Moment.jsDay.js 两者都是专门用于处理时间的 JavaScript 库,功能差不多,因为 Day.js 的设计就是参考的 Moment.js。但是 Day.js 相比 Moment.js 的包体积要更小一些,因为它采用了插件化的处理方式。 Day.js…

下载 嵌入式qt实战教程pdf_Qt之JSON教程-实战篇

以实战例子讲述JSON三兄弟的后续故事。实战一:发送JSON网络请求作为JSON老大哥的QJsonValue自知对面的大户人家妹子貌美如花,心里已经打起算盘,先下手为强,后下手遭殃。决定显示下自己的家底,想起这件事,老…

Vue移动端项目——搜索联想建议功能的实现(结合watch属性和使用lodash防抖节流)

搜索联想建议 1. 基本思路: 当搜索框输入内容的时候,请求加载联想建议的数据 将请求得到的结果绑定到模板中 2. 基本功能 一、将父组件中搜索框输入的内容传给联想建议子组件 二、在子组件中监视搜索框输入内容的变化,如果变化则请求获取…

.net get set 初始化_.NET项目升级:可为空引用

(给DotNet加星标,提升.Net技能)转自:波多尔斯基cnblogs.com/podolski/p/12692888.html前言C#8引入了新特性:可为空引用https://docs.microsoft.com/zh-cn/dotnet/csharp/nullable-references这个功能个人觉得挺好的,能够非常明确的…

用GDB排查Python程序故障

某Team在用Python开发一些代码,涉及子进程以及设法消除僵尸进程的需求。实践中他们碰上Python程序非预期退出的现象。最初他们决定用GDB调试Python解释器,查看exit()的源头。我听了之后,觉得这个问题应该用别的调试思路。帮他们排查这次程序故…

解决后端返回数据中的大数字问题(使用第三方包json-bigint )

JavaScript 能够准确表示的整数范围在-2^53到2^53之间(不含两个端点),超过这个范围,无法精确表示这个值,这使得 JavaScript 不适合进行科学和金融方面的精确计算。 Math.pow(2, 53) // 90071992547409929007199254740…

java 静态代码块_关于Java你不知道的那些事之代码块

前言普通代码块:在方法或语句中出现的{},就被称为代码块静态代码块:静态代码块有且仅加载一次,也就是在这个类被加载至内存的时候普通代码块和一般语句执行顺序由他们在代码中出现的次序决定,先出现先执行代码一/**对于…

Vue项目开发过程中解决跨域问题(vue.config.js结合axios)

一、问题描述 在本地开发过程中,调用后端提供的接口获取数据将获取的数据渲染到页面中,但是浏览器报错: // 控制台报错信息 Access to XMLHttpRequest at http://x.x.x.x/app/v1_0/user/followings from origin http://localhost:8080 has…