当前位置：首页 > VUE

vue单页面实现登录

2026-01-12 01:30:59VUE

实现登录功能的基本步骤

在Vue单页面应用（SPA）中实现登录功能，通常需要结合前端和后端交互。以下是关键步骤和代码示例：

创建登录组件 开发一个独立的登录组件，包含表单元素如用户名和密码输入框，以及提交按钮。

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await 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>

设置路由守卫 使用Vue Router的导航守卫保护需要认证的路由，检查用户是否已登录。

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

状态管理 对于复杂应用，建议使用Vuex管理用户认证状态。

const store = new Vuex.Store({
  state: {
    user: null,
    token: null
  },
  mutations: {
    setUser(state, { user, token }) {
      state.user = user
      state.token = token
    },
    clearUser(state) {
      state.user = null
      state.token = null
    }
  }
})

HTTP拦截器 配置axios拦截器，自动在请求头中添加认证token。

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

错误处理 实现统一的错误处理机制，特别是处理401未授权响应。

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