当前位置：首页 > VUE

vue实现登录退出

2026-03-28 04:50:42VUE

Vue 实现登录与退出功能

准备工作

安装必要依赖

npm install vue-router axios vuex

创建路由文件 router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'

const routes = [
  { path: '/login', component: Login },
  { path: '/', component: Home, meta: { requiresAuth: true } }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

登录功能实现

创建登录页面 views/Login.vue

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

<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default {
  setup() {
    const username = ref('')
    const password = ref('')
    const router = useRouter()
    const store = useStore()

    const handleLogin = async () => {
      try {
        await store.dispatch('login', {
          username: username.value,
          password: password.value
        })
        router.push('/')
      } catch (error) {
        console.error(error)
      }
    }

    return { username, password, handleLogin }
  }
}
</script>

Vuex 状态管理

创建 store store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    user: null,
    isAuthenticated: false
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
      state.isAuthenticated = !!user
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const response = await axios.post('/api/login', credentials)
      commit('SET_USER', response.data.user)
      localStorage.setItem('token', response.data.token)
    },
    logout({ commit }) {
      commit('SET_USER', null)
      localStorage.removeItem('token')
    }
  }
})

路由守卫

在 router/index.js 中添加导航守卫

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

退出功能实现

在需要显示退出按钮的组件中添加

vue实现登录退出

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

<script>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const store = useStore()
    const router = useRouter()

    const handleLogout = () => {
      store.dispatch('logout')
      router.push('/login')
    }

    return { handleLogout }
  }
}
</script>