跳到主要内容

判断用户登录状态

在前面的课程中，我们实现了用户的登录功能，并成功记录了用户的登录状态。接下来，我们需要在页面中根据用户的登录状态进行相应的操作。

使用Vuex State保持用户状态​

在Vue项目中，我们通常使用Vuex的State来保持各种状态信息，比如用户的登录状态。在我们的Vue项目中，会有一个Store，通常在index.js中，我们可以在这里的State中添加一个isLogin属性来表示用户的登录状态。初始值默认为false。

frontend/src/store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    isLogin: false
  },
  getters: {
  },
  mutations: {
    initializeStore(state) {
      if (localStorage.getItem('token')) {
        state.isLogin = true
      }
      else {
        state.isLogin = false
      }
    },
    setLoginStatus(state, status) {
      state.isLogin = status
    }
  },
  actions: {
  },
  modules: {
  }
})
代码解析

这是一个使用 Vuex 状态管理库的 Vue.js 项目的 store（仓库）配置文件。让我们逐步解释这段代码：

  1. 从 Vuex 库中导入 createStore 函数，用于创建 Vuex store 实例。

  2. 创建 Vuex store 实例：

    使用 createStore 函数创建 Vuex store 实例，该实例包含以下部分：

    • state: 包含应用级别状态的对象。在这里，有一个名为 isLogin 的状态，用于表示用户是否已登录，默认为 false。
    • getters: 用于获取 state 中的数据的计算属性。在这里没有定义额外的 getters。
    • mutations: 包含同步修改 state 的方法。在这里，有两个 mutations：
      • initializeStore: 用于初始化 state 中的 isLogin 状态，根据本地存储中的 token 存在与否来设置登录状态。
      • setLoginStatus: 用于设置 isLogin 的状态，接收一个布尔值 status 作为参数，用于表示用户的登录状态。
    • actions: 包含异步操作和业务逻辑的方法。在这里没有定义额外的 actions。
    • modules: 用于将 store 拆分为模块的对象。在这里没有定义额外的模块。

  3. initializeStore Mutation：

    initializeStore(state) {
      if (localStorage.getItem('token')) {
        state.isLogin = true
      } else {
        state.isLogin = false
      }
    }

    当调用 initializeStore mutation 时，它会检查本地存储中是否存在名为 token 的数据。如果存在，则将 state.isLogin 设置为 true，表示用户已登录；否则，将其设置为 false，表示用户未登录。

    当调用 setLoginStatus mutation 时，它接收一个布尔值 status 作为参数，并将 state.isLogin 设置为传入的状态值。这用于在其他地方（例如登录组件）更新用户的登录状态。

这个 Vuex store 的配置简单地管理了一个表示用户登录状态的状态变量，并提供了两个 mutations 用于初始化和更新该状态。

在创建组件前判断登录状态​

🔒 试读结束

继续阅读完整内容

以上为免费预览。前往「Django + Vue 全栈课程」，查看后续完整讲解、案例演示和配套资料。

查看课程详情