当前位置：首页 > VUE

vue spa实现登录

2026-02-19 13:03:33VUE

实现 Vue SPA 登录功能

创建登录组件

在 src/views 目录下创建 Login.vue 组件，包含表单和提交逻辑：

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await this.$axios.post('/api/login', {
          username: this.username,
          password: this.password
        })
        localStorage.setItem('token', response.data.token)
        this.$router.push('/dashboard')
      } catch (error) {
        console.error('登录失败', error)
      }
    }
  }
}
</script>

配置路由

在 src/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', component: Login },
    { path: '/dashboard', component: Dashboard, 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

设置 HTTP 拦截器

在 src/main.js 中配置 axios 拦截器：

import axios from 'axios'

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

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

状态管理（可选）

对于复杂应用，可使用 Vuex 管理登录状态：

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: null,
    token: localStorage.getItem('token') || null
  },
  mutations: {
    setUser(state, { user, token }) {
      state.user = user
      state.token = token
      localStorage.setItem('token', token)
    },
    logout(state) {
      state.user = null
      state.token = null
      localStorage.removeItem('token')
    }
  }
})

安全注意事项

使用 HTTPS 协议传输数据
考虑实现 CSRF 防护机制
敏感操作需进行二次验证
定期刷新 token 有效期

后端接口示例

Node.js 的简单登录接口实现：

vue spa实现登录

app.post('/api/login', (req, res) => {
  const { username, password } = req.body
  // 实际项目中应查询数据库验证
  if (username === 'admin' && password === '123456') {
    const token = jwt.sign({ userId: 1 }, 'your-secret-key', { expiresIn: '1h' })
    res.json({ token })
  } else {
    res.status(401).json({ error: '认证失败' })
  }
})