当前位置：首页 > VUE

vue 实现登录退出

2026-01-08 15:46:36VUE

Vue 实现登录与退出功能

登录功能实现

创建登录表单组件，包含用户名和密码输入框及提交按钮。使用 v-model 双向绑定数据。

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

在 Vue 实例或组件中定义数据和方法，处理登录逻辑。通常需要调用 API 接口验证用户凭证。

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleLogin() {
      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>

退出功能实现

创建退出按钮，点击时触发退出方法。

<button @click="handleLogout">退出登录</button>

实现退出逻辑，清除用户凭证并重定向到登录页面。

methods: {
  handleLogout() {
    localStorage.removeItem('token')
    this.$router.push('/login')
  }
}

路由守卫配置

在路由配置中添加导航守卫，保护需要认证的路由。

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

状态管理（可选）

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

const store = new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    setUser(state, user) {
      state.user = user
      state.isAuthenticated = true
    },
    logout(state) {
      state.user = null
      state.isAuthenticated = false
    }
  }
})

响应拦截器（可选）

配置 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)
})

以上实现涵盖了 Vue 应用中登录退出的核心功能，可根据实际需求进行调整和扩展。

vue 实现登录退出