vue登录模块实现

Vue 登录模块实现

创建登录表单组件

在 components/LoginForm.vue 中构建基础表单，包含用户名、密码输入框和提交按钮。使用 v-model 实现双向数据绑定。

<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>

状态管理（Vuex）

在 store/index.js 中配置 Vuex 存储用户状态和登录逻辑：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    SET_USER(state, payload) {
      state.user = payload.user
      state.token = payload.token
    }
  },
  actions: {
    async login({ commit }, credentials) {
      try {
        const response = await axios.post('/api/login', credentials)
        commit('SET_USER', response.data)
        localStorage.setItem('token', response.data.token)
        return response.data
      } catch (error) {
        throw error.response.data
      }
    }
  }
})

路由配置

在 router/index.js 中设置登录路由和权限控制：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login.vue'
import Dashboard from '../views/Dashboard.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: { requiresGuest: true }
    },
    {
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    }
  ]
})

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

export default router

登录页面集成

在 views/Login.vue 中整合表单和登录逻辑：

<template>
  <div class="login-container">
    <LoginForm @login="attemptLogin" />
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<script>
import LoginForm from '@/components/LoginForm.vue'

export default {
  components: { LoginForm },
  data() {
    return {
      error: null
    }
  },
  methods: {
    async attemptLogin(credentials) {
      try {
        await this.$store.dispatch('login', credentials)
        this.$router.push('/dashboard')
      } catch (error) {
        this.error = error.message || '登录失败'
      }
    }
  }
}
</script>

持久化登录状态

在 main.js 中初始化时检查本地存储的 token：

import store from './store'

const token = localStorage.getItem('token')
if (token) {
  store.commit('SET_USER', { token })
}

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

安全增强措施

添加 axios 请求拦截器自动附加 token：

axios.interceptors.request.use(config => {
  const token = store.state.token
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, error => {
  return Promise.reject(error)
})

实现登出功能：

// Vuex action
logout({ commit }) {
  commit('SET_USER', { user: null, token: null })
  localStorage.removeItem('token')
}

// 组件调用
methods: {
  logout() {
    this.$store.dispatch('logout')
    this.$router.push('/login')
  }
}