首页 > 其他分享 >vue中 vuex踩坑笔记-刷新后动态路由不渲染

vue中 vuex踩坑笔记-刷新后动态路由不渲染

时间:2023-05-09 09:36:55浏览次数:41  
标签:vue 保存 token cookie vuex 路由

在vue中,vuex经常用于存储公共状态,特别是在登录的时候获取token再保存,这个时候 如果是做的动态路由,由于vuex的特性在你刷新后会清除你的所有操作的存储。这时候,存储的token和动态路由都会被清掉。

如何解决这个问题:

1.结合session或者cookie(通常用这个),token保存的时候,除了在vuex中保存一份,在cookie中也保存一份,在使用获取基础信息的接口,用cookie中保存token传给后端。

 

2.在前端路由拦截的时候,判断有没有基础信息(登录后,需要一个获取登录者基础信息的接口),如果没有再请求一次,重新保存到vuex里,在这重新获取一次动态路由,addRoutes进router中。注:(这么写next({ ...to, replace: true })确保 路由被add进去)

 

标签:vue,保存,token,cookie,vuex,路由
From: https://www.cnblogs.com/Yimuqiao/p/17383818.html

相关文章

  • 【nodejs基础】Express、路由、中间件详解04
    一、Express简介Express是基于Node.js平台,快速、开放、极简的Web开发框架通俗的理解:Express的作用和Node.js内置的http模块类似,是专门用来创建Web服务器的。本质就是一个npm上的第三方包,提供了快速创建Web服务器的便捷方法中文官网http://www.expressjs.com.cn......
  • 路由层
    路由层一、路由的作用路由即请求地址与视图函数的映射关系,如果把网站比喻为一本书,那路由就好比是这本书的目录,在Django中路由默认配置在urls.py中,如下图:二、简单的路由配置#urls.pyfromdjango.urlsimportre_path#由一条条映射关系组成的urlpatterns这个列表称之为路......
  • vue3 路由页面返回时,恢复滚动条位置
    首先,路由必须是KeepAlive模式<scriptsetuplang="ts">import{onActivated}from"vue";import{onBeforeRouteLeave}from"vue-router";import{ref}from"vue"constscrollRef=ref(<HTMLElement><unknow......
  • 路由控制
    Django的路由系统Django1.11版本URLConf官方文档URL配置(URLconf)就像Django所支撑网站的目录。它的本质是URL与要为该URL调用的视图函数之间的映射表。你就是以这种方式告诉Django,对于这个URL调用这段代码,对于那个URL调用那段代码。URLconf配置基本格式:fromdjango.conf......
  • vue中手动清除KeepAlive缓存
    首先,这是vue的官方文档 KeepAlive|Vue.js(vuejs.org) KeepAlive组件能够保存当前组件状态,在进行路由跳转时变为【不活跃状态】而非卸载。但是官方并没有提供清除缓存的方法(除了刷新页面,整体重建)  假设以下是我们路由&对应组件的代码<router-viewv-slot="{Component}"......
  • vue-cli打包出单文件
    //vue.config.js修改const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({ transpileDependencies:true, filenameHashing:false, css:{  extract:false, }, configureWebpack:{  optimization:{   spl......
  • Vue "引用式"调用组件内函数
    场景希望在点击页面上的某个button时,刷新某个组件的内容.组件内容刷新函数getStatistic()在组件<Table/>内,当点击"统计"按钮时,页面Block切换至统计页面,同时调用对应组件中的getStatistic()函数,更新数据.解决方案//创建一个ref对象,接受<Table/>组件......
  • 记录--极致舒适的Vue页面保活方案
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助为了让页面保活更加稳定,你们是怎么做的?我用一行配置实现了Vue页面保活是指在用户离开当前页面后,可以在返回时恢复上一次浏览页面的状态。这种技术可以让用户享受更加流畅自然的浏览体验,而不会被繁琐的操作打扰......
  • Cisco 思科路由交换-开启telnet
    Router>enable   进入特权模式Router#configterminal  进入全局模式Router(config)#hostnamer1  路由器修改名字r1(config)#noipdomain-lookup   取消dns查询r1(config)#linevty04          开启telnetr1(config-line)#password123  设置密码 ......
  • vue3 多级数据下拉选择组件
    若依的下拉组件太复杂,我改了一下,希望对大家有帮助,基于element-plusel-tree-select组件:举个栗子,TreeSelect.vue:<template><div><el-tree-selectstyle="width:100%"v-model="valueId"id="tree-option"ref="s......