当前位置：首页 > VUE

vue实现登录源码

2026-03-28 11:30:33VUE

以下是一个基于 Vue.js 的登录功能实现示例，包含前端代码和关键逻辑说明：

登录页面组件 (Login.vue)

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

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default {
  setup() {
    const form = ref({
      username: '',
      password: ''
    })
    const router = useRouter()
    const store = useStore()

    const handleSubmit = async () => {
      try {
        await store.dispatch('user/login', form.value)
        router.push('/dashboard')
      } catch (error) {
        alert(error.message)
      }
    }

    return { form, handleSubmit }
  }
}
</script>

Vuex 存储模块 (user.js)

import axios from 'axios'

const state = {
  token: localStorage.getItem('token') || '',
  userInfo: null
}

const mutations = {
  SET_TOKEN(state, token) {
    state.token = token
    localStorage.setItem('token', token)
  },
  SET_USER_INFO(state, userInfo) {
    state.userInfo = userInfo
  }
}

const actions = {
  async login({ commit }, credentials) {
    const response = await axios.post('/api/auth/login', credentials)
    commit('SET_TOKEN', response.data.token)
    commit('SET_USER_INFO', response.data.user)
    return response.data
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

路由配置

import { createRouter, createWebHistory } from 'vue-router'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

export default router

全局请求拦截器

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