Vue3封装登录功能的两种实现

下面我会详细介绍如何使用Vue3封装登录功能以及两种实现方式。

1. 创建登录组件

首先，我们需要创建一个登录组件，在该组件中编写登录所需的页面布局和逻辑代码。可以使用Vue的template和script标签来创建组件，并在组件中通过v-model指令来绑定输入框中的值。

<template>
  <div>
    <h2>登录</h2>
    <form>
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="username" /><br />

      <label for="password">密码：</label>
      <input type="password" id="password" v-model="password" /><br />

      <button type="submit" @click.prevent="login">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async login() {
      // 发送登录请求
      const res = await API.login(this.username, this.password)

      // 处理登录响应
      if (res.code === 200) {
        // 登录成功，跳转到首页
        this.$router.push('/')
      } else {
        // 登录失败，显示错误提示
        this.$message.error(res.msg)
      }
    }
  }
}
</script>

2. 实现方式一：使用Vuex存储登录状态

接下来，我们考虑如何将用户的登录状态存储在Vuex中，以便其他组件也可以访问到该登录状态。具体实现方式如下：

1. 在store中创建一个名为auth.js的模块，用于存储登录相关的数据和方法（如token、用户名、登录和退出方法等）。其中，需要在state中定义一个名为isLogin的状态来表示用户的登录状态。

// store/auth.js
import API from '@/api'

export default {
  namespaced: true,
  state: {
    token: '',
    username: '',
    isLogin: false
  },
  mutations: {
    setToken(state, payload) {
      state.token = payload.token
      state.username = payload.username
      state.isLogin = true
    },
    clearToken(state) {
      state.token = ''
      state.username = ''
      state.isLogin = false
    }
  },
  actions: {
    async login({ commit }, { username, password }) {
      const res = await API.login(username, password)
      if (res.code === 200) {
        commit('setToken', {
          token: res.token,
          username: username
        })
      } else {
        throw new Error(res.msg)
      }
    },
    logout({ commit }) {
      commit('clearToken')
    }
  }
}

1. 在登录组件中调用登录方法，并将登录成功后返回的token和用户名传给mutations中的setToken方法设置登录状态。

// Login.vue
<template>
  <div v-if="$store.state.auth.isLogin">
    <p>欢迎，{{ $store.state.auth.username }}！</p>
    <button @click="$store.dispatch('auth/logout')">退出登录</button>
  </div>
  <div v-else>
    <h2>登录</h2>
    <form>
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="username" /><br />

      <label for="password">密码：</label>
      <input type="password" id="password" v-model="password" /><br />

      <button type="submit" @click.prevent="login">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async login() {
      try {
        await this.$store.dispatch('auth/login', {
          username: this.username,
          password: this.password
        })

        this.$router.push('/')
      } catch (e) {
        this.$message.error(e.message)
      }
    }
  }
}
</script>

1. 在其他组件中通过$store.state.auth.isLogin来判断当前用户是否登录，在需要获取当前用户的信息时，可以使用$store.state.auth.username。

3. 实现方式二：使用localStorage存储登录状态

如果不想使用Vuex，我们也可以将用户的登录状态通过localStorage来存储，具体实现方式如下：

1. 在登录组件中调用登录方法，并将登录成功后返回的token和用户名存储到localStorage中。

// Login.vue
<template>
  <div>
    <h2>登录</h2>
    <form>
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="username" /><br />

      <label for="password">密码：</label>
      <input type="password" id="password" v-model="password" /><br />

      <button type="submit" @click.prevent="login">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async login() {
      // 发送登录请求
      const res = await API.login(this.username, this.password)

      // 处理登录响应
      if (res.code === 200) {
        // 登录成功，保存token和用户名
        localStorage.setItem('token', res.token)
        localStorage.setItem('username', this.username)

        // 跳转到首页
        this.$router.push('/')
      } else {
        // 登录失败，显示错误提示
        this.$message.error(res.msg)
      }
    }
  }
}
</script>

1. 在需要获取登录状态的组件中，通过读取localStorage中的token和username来判断当前用户是否登录和获取当前用户的信息。

// Profile.vue
<template>
  <div v-if="isLogin">
    <p>欢迎，{{ username }}！</p>
    <button @click="logout">退出登录</button>
  </div>
  <div v-else>
    <p>请先登录！</p>
    <router-link to="/login">登录</router-link>
  </div>
</template>

<script>
export default {
  name: 'Profile',
  data() {
    return {
      isLogin: false,
      username: ''
    }
  },
  created() {
    const token = localStorage.getItem('token')
    const username = localStorage.getItem('username')

    if (token && username) {
      this.isLogin = true
      this.username = username
    }
  },
  methods: {
    logout() {
      localStorage.removeItem('token')
      localStorage.removeItem('username')
      this.isLogin = false
      this.username = ''
      this.$router.push('/login')
    }
  }
}
</script>

以上就是使用Vue3封装登录功能的两种实现方式。其中，第一种实现方式使用Vuex保存登录状态，适合在需要全局管理状态的复杂应用中使用；而第二种实现方式使用localStorage保存登录状态，适合在简单的应用中使用。希望对你有所帮助。