当前位置：首页 > VUE

vue 实现登录退出

2026-01-15 02:58:18VUE

Vue 实现登录和退出功能

安装依赖

确保项目已安装 Vue 和 Vue Router。若未安装，可通过以下命令安装：

npm install vue vue-router

创建登录组件

在 src/components 目录下创建 Login.vue 文件，实现登录表单和逻辑：

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button @click="handleLogin">登录</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleLogin() {
      if (this.username && this.password) {
        localStorage.setItem('token', '模拟token')
        this.$router.push('/')
      }
    }
  }
}
</script>

创建路由配置

在 src/router/index.js 中配置登录路由和主页路由：

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

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/login', component: Login },
    { path: '/', component: Home, meta: { requiresAuth: true } }
  ]
})

实现路由守卫

在 src/main.js 或路由配置中添加全局前置守卫，检查用户是否登录：

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

实现退出功能

在主页组件 Home.vue 中添加退出按钮和逻辑：

<template>
  <div>
    <h1>欢迎</h1>
    <button @click="handleLogout">退出</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleLogout() {
      localStorage.removeItem('token')
      this.$router.push('/login')
    }
  }
}
</script>

状态管理（可选）

对于复杂应用，建议使用 Vuex 管理登录状态。创建 src/store/index.js：

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

Vue.use(Vuex)

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