4.5. 完善登录功能

2.5

3.0 2.6 2.5

V01 Vue.js 实战教程 - 基础篇 /

本教程最新版为 2.6，当前版本已放弃维护，请阅读最新版本！

简介

本小节中，我们将使用 Vuex 来管理用户登录，同时在首页添加注册成功的提示，并完善路由的配置。

添加登录状态

打开的 src/store/index.js 文件，添加 auth 以处理登录状态（注释部分是涉及的修改）:

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import ls from '../utils/localStorage'
import router from '../router'

Vue.use(Vuex)

const state = {
  user: ls.getItem('user'),
  // 添加 auth 来保存当前用户的登录状态
  auth: ls.getItem('auth')
}

const mutations = {
  UPDATE_USER(state, user) {
    state.user = user
    ls.setItem('user', user)
  },
  // 添加 UPDATE_AUTH 来更改当前用户的登录状态
  UPDATE_AUTH(state, auth) {
    state.auth = auth
    ls.setItem('auth', auth)
  }
}

const actions = {
  login({ commit }, user) {
    if (user) commit('UPDATE_USER', user)
    // 更新当前用户的登录状态为已登录
    commit('UPDATE_AUTH', true)
    router.push('/')
  }
}

const store = new Vuex....

本文章首发在 LearnKu.com 网站上。

为了保证课程的高品质，我们需要对课程进行收费。付费后才能观看剩余内容。购买

4.5. 完善登录功能

2.5

3.0 2.6 2.5

简介

添加登录状态

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

4.5. 完善登录功能 2.5 3.0 2.6 2.5

简介

添加登录状态

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录

4.5. 完善登录功能

2.5

3.0 2.6 2.5