vue.js框架用户信息储存在哪里?

在我们***项目中,使用了Vue前端框架,由于某些页面(比如最近的秋季抽奖主题以及玩家社区评论页面和点赞页面)需要用户登录才能进行签到、抽奖、评论和点赞等功能。【相关推荐:vue.js视频教程

一般像这样的用户信息一般都是存在Vuex里面,因为Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

但是Vuex虽然能存储状态,但是一旦页面刷新,用户状态也随之刷新消失,如果想要用户状态不会因为刷新而消失,这里便要用到本地存储(localstorage、sessionstorage)了。

vuex存储在内存,localstorage(本地存储)则以文件的方式存储在本地,永久保存(不主动删除,则一直存在);sessionstorage( 会话存储 ) ,临时保存。localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

使用vuex+localStorage存储用户信息

1、首先需要装vuex

npm install vuex -d

2、新建store文件夹,新建index.js, 并引入vue、vuex,代码如下:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const key = 'user'
const store = new Vuex.Store({
  state () {
    return {
      user: null
    }
  },
  getters: {
    getStorage: function (state) {
      if (!state.user) {
        state.user = JSON.parse(localStorage.getItem(key))
      }
      return state.user
    }
  },
  mutations: {
    $_setStorage (state, value) {
      state.user = value
      localStorage.setItem(key, JSON.stringify(value))
    },
    $_removeStorage (state) {
      state.user = null
      localStorage.removeItem(key)
    }
  }
})

export default store

3、在main.js中引入store,

import store from './store/index'
new Vue({
  el: '#app',
  router,
  store,  // 引入store
  components: { App },
  template: '<App/>'
})

4、在登录组件中,如代码所示:

this.$message({
   message: '登录成功',
   type: 'success'
})
this.$store.commit('$_setStorage', {user: this.loginForm.username})
this.$router.push({name: 'Home'})

5、储存其他状态类信息,方式相同。

使用session Storage和vuex保存用户登录状态(用户登录信息)

首先,vuex安装完成之后,构建如下目录:

1.png

这样做的目的是降低代码的耦合度,方便以后的修改与维护。

然后,vuex中几个文件详情如下:

2.webp.jpg
store.js

在store.js中目前保存三个数据,一个是当前用户,一个是判断当前用户是否已经登录,最后一个是保存用户登录后持有的token。实际上token也可以不保存在vuex中,因为vuex是一个状态管理器而非一个存储工具。我在axios的headers里是直接用的sessionStorage里的token。

3.webp.jpg
getters.js

4.webp.jpg
mutations.js

5.webp.jpg
actions.js

接下来,在用户登录的时候,我们就需要将用户名和token存放入sessionStorge,再由sessionStorage传入vuex中。

6.webp.jpg

如上图,在登录成功之后,执行红框中的两个操作,就实现了上述的功能。vuex的dispatch和commit方法是有区别的,这个区别下一篇我们再详细讲。sessionStorage的setItem和getItem是一对,语义上就可以理解用法,不多说。将用户名放入vuex,调用setUser即执行actions.js中的方法来改变状态,则进入mutations.js中的userStatus方法,最终实现改变store.js中的三个状态。

那么其实到这里,已经实现了将用户的状态,即用户名和token放入sessionStorage中的要求了。

下一个问题是,在刷新页面的时候,如何获取这个状态呢?

7.png

首先要知道,vuex中的状态一旦页面刷新,就不再存在。所以为了实现在刷新页面时,仍然展现出用户头像,就需要从sessionStorage种提取状态再传值给vuex。

8.png

9.png

computed里的isLogin()

每当刷新页面的时候,就会从sessionStorage中查询是否有userName和token的存在,如果存在,则改变vuex中的isLogin,即用户状态,最后return一个isLogin()。这样就实现了保存用户登录信息的功能。

最后,再来说说登出功能。要明白一个逻辑,用户登录之后,如果再次回到登录界面,必然是执行了登出操作。所以直接在login.vue里加一个路由控制就可以了。

10.png

login的组建内守卫

登出也就是将sessionStorage里的userName和token清空,就不多说了。

想要了解更多相关知识,可访问 前端学习网站!!

以上就是vue.js框架用户信息储存在哪里?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏