当前位置：首页 > VUE

vue单页面实现登录

2026-02-09 14:20:17VUE

Vue 单页面应用实现登录功能

路由配置

在 router/index.js 中配置登录路由和主页路由，使用路由守卫控制访问权限。

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

Vue.use(Router)

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

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

export default router

登录组件实现

创建 Login.vue 组件，包含表单和提交逻辑。

vue单页面实现登录

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      try {
        const response = await this.$http.post('/api/login', {
          username: this.username,
          password: this.password
        })

        localStorage.setItem('token', response.data.token)
        this.$router.push('/')
      } catch (error) {
        alert('登录失败')
      }
    }
  }
}
</script>

状态管理

使用 Vuex 管理用户状态，在 store/index.js 中配置。

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
    login({ commit }, userData) {
      return new Promise((resolve, reject) => {
        // 这里替换为实际的API调用
        setTimeout(() => {
          commit('setUser', userData)
          localStorage.setItem('token', 'fake-token')
          resolve()
        }, 500)
      })
    }
  }
})

API 请求封装

在 src/api/auth.js 中封装登录相关API。

vue单页面实现登录

import axios from 'axios'

export default {
  login(credentials) {
    return axios.post('/api/login', credentials)
  }
}

响应拦截器

在 main.js 中添加响应拦截器处理未授权情况。

import axios from 'axios'

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      localStorage.removeItem('token')
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

登录后跳转处理

在登录成功后更新Vuex状态并跳转到主页。

methods: {
  async handleLogin() {
    try {
      await this.$store.dispatch('login', {
        username: this.username,
        password: this.password
      })
      this.$router.push('/')
    } catch (error) {
      console.error(error)
    }
  }
}