vue 实现登录功能

创建登录表单组件

在 Vue 项目中创建一个登录表单组件，通常命名为 Login.vue。该组件包含用户名和密码输入框，以及提交按钮。

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="username" type="text" placeholder="用户名" required />
    <input v-model="password" type="password" placeholder="密码" required />
    <button type="submit">登录</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('login', {
        username: this.username,
        password: this.password
      })
    }
  }
}
</script>

处理登录逻辑

在父组件或专门的 store（如 Vuex）中处理登录逻辑。这里以 Vuex 为例，创建一个 auth 模块管理登录状态。

// store/auth.js
export default {
  state: {
    user: null,
    token: null
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
    },
    SET_TOKEN(state, token) {
      state.token = token
    }
  },
  actions: {
    async login({ commit }, credentials) {
      try {
        const response = await axios.post('/api/login', credentials)
        commit('SET_USER', response.data.user)
        commit('SET_TOKEN', response.data.token)
        localStorage.setItem('token', response.data.token)
        axios.defaults.headers.common['Authorization'] = `Bearer ${response.data.token}`
      } catch (error) {
        throw error
      }
    }
  }
}

路由配置

配置路由保护，确保未登录用户无法访问受保护的路由。

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import store from './store'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      component: () => import('./views/Login.vue')
    },
    {
      path: '/dashboard',
      component: () => import('./views/Dashboard.vue'),
      meta: { requiresAuth: true }
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.auth.token) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

export default router

登录状态持久化

在应用初始化时检查 localStorage 中的 token，保持登录状态。

// main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  el: '#app',
  store,
  created() {
    const token = localStorage.getItem('token')
    if (token) {
      store.commit('auth/SET_TOKEN', token)
      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
    }
  },
  render: h => h(App)
})

错误处理和用户反馈

添加错误处理和用户反馈机制，提升用户体验。

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="username" type="text" placeholder="用户名" required />
    <input v-model="password" type="password" placeholder="密码" required />
    <div v-if="error" class="error">{{ error }}</div>
    <button type="submit" :disabled="loading">
      {{ loading ? '登录中...' : '登录' }}
    </button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      error: null,
      loading: false
    }
  },
  methods: {
    async handleSubmit() {
      this.loading = true
      this.error = null
      try {
        await this.$store.dispatch('auth/login', {
          username: this.username,
          password: this.password
        })
        this.$router.push('/dashboard')
      } catch (error) {
        this.error = error.response?.data?.message || '登录失败'
      } finally {
        this.loading = false
      }
    }
  }
}
</script>