vue中保存登陆状态

本文介绍了在Vue应用中如何保存登录状态,包括使用Session Storage保存用户信息,利用Vuex状态管理库进行储存,以及结合Session和Vuex的使用方式。在登录成功后,通过路由传递登录信息,但这种方式安全性较低。通过Session Storage可以安全地存储数据,而Vuex则提供了更复杂的state管理,即使刷新页面,通过插件也能保持状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

  • 路由传递

   login=>index

        1.login:   this.$router.push({ path: '/index', query: { orderId: 123 } })

        2.index:在mounted函数中  this.$route.query.orderId

不隐私 安全性极低

Session储存

  1. 存值sessionStorage.setItem("userName你随便定义的",存入的值)
  2. 取值sessionStorage.getItem("userName你随便定义的")

Vue store 储存

    1.先下载安装vuex  使用命令:npm install vuex –save

    2.npm run dev启动项目

    3.在项目的src下新建一个store目录,并且在该目录下新建index.js,在index.js中写一下示例内容

         username这种只是我自己定义的参数值另外getters,mutations里的方法名都可更改,,复杂的action,module啥的先不管

         取值this.$store.getters.getuser

         改值this.$store.commit('myuser',this.uname)

    4.src下的main.js下引入store 

     5.到此可存储改变,但是若刷新该值还会变成初始化定义的值引入插件即可

也可以session和vuex结合起来使用

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值