vue axios登录获取状态码 vue登录后获取用户信息

在Vue2项目中，可以将个人信息存储在Vuex状态管理中或者浏览器的本地存储中，具体取决于项目的需求和规模。

1. Vuex状态管理

在Vuex中定义一个user模块，用于存储用户信息，可以在登录成功后将用户信息存储到该模块中。

// store/user.js
   const state = {
         userInfo: ''
        }
   const mutations = {
         setUserInfo(state, userInfo) {
         state.userInfo = userInfo
                   }
                 }
   const actions = {
      login({ commit }, userInfo) {
     // 调用登录接口
// 登录成功后将用户信息存储到Vuex中
   commit('setUserInfo', userInfo)
              }
          }
export default {
       namespaced: true,
      state,
       mutations,
       actions
              }

在需要展示用户信息的组件中，可以通过Vuex的mapState辅助函数获取用户信息并展示。

// components/UserInfo.vue
 <template>
   <div>
       <p>用户名：{{ userInfo.username }}</p>
       <p>邮箱：{{ userInfo.email }}</p>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
       ...mapState('user', ['userInfo'])
                  }
                }
</script>

2. 浏览器的本地存储

在登录成功后，可以将用户信息存储到浏览器的本地存储中，例如localStorage或sessionStorage。

     

// 登录成功后将用户信息存储到localStorage中
        localStorage.setItem('userInfo', JSON.stringify(userInfo))

在需要展示用户信息的组件中，可以通过localStorage获取用户信息并展示。

// components/UserInfo.vue
<template>
<div>
   <p>用户名：{{ userInfo.username }}</p>
   <p>邮箱：{{ userInfo.email }}</p>
</div>
</template>
<script>
export default {
computed: { userInfo() {
return JSON.parse(localStorage.getItem('userInfo'))
}
}
}
</script>

需要注意的是，使用浏览器的本地存储存储用户信息存在安全风险，因此需要对用户信息进行加密处理。同时，如果用户信息需要在多个页面中展示，建议使用Vuex状态管理。

 

补充一点,在 Vue 中，可以使用浏览器的本地存储（localStorage 或 sessionStorage）来存储数据。

当页面重新加载时，浏览器会自动将存储在本地存储中的数据读取出来，因此可以在页面重新加载后重新加载到 Vuex 中。

具体来说，可以在 Vue 应用中使用 Vuex 插件 vuex-persistedstate 来实现将 Vuex 中的数据存储到本地存储中。该插件会在每次 Vuex 状态发生变化时，将状态数据存储到本地存储中。当页面重新加载时，该插件会自动将存储在本地存储中的数据读取出来，并将其设置为 Vuex 的初始状态。

因此，通过使用 vuex-persistedstate 插件，可以实现在页面重新加载后重新加载到 Vuex 中。

 

 首先：我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化

 

npm i vuex-persistedstate

 

               然后：在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js和category.js三个模块。 (根据项目需求创建)

继续：在 src/store/index.js 中导入 user cart category 三模块。

import user from './modules/user'
import cart from './modules/cart'
import category from './modules/category'

最后：使用vuex-persistedstate插件来进行持久化

import { createStore } from 'vuex'
// 引入vuex持久化方法createPersistedState
import createPersistedState from 'vuex-persistedstate'
import user from './modules/user'
import cart from './modules/cart'
import category from './modules/category'
 
export default createStore({
  state: {},
  mutations: {},
  actions: {},
  getters: {},
  modules: {
    // 模块化数据
    user,
    cart,
    category
  },
  plugins: [
    // veux持久化配置
    createPersistedstate({
      key: 'rabbitstore-client',
      paths: ['user', 'cart', 'category'] 
                                }) 
             ] 
        })