当前位置：首页 > VUE

vue实现登录退出

2026-02-10 18:52:38VUE

Vue 实现登录和退出功能

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

npm install vue vue-router

路由配置
在 router/index.js 中配置登录和主页的路由，并设置路由守卫：

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

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

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

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

export default router;

登录组件
在 Login.vue 中实现登录逻辑，提交表单后存储 token 并跳转：

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

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      // 模拟登录成功
      localStorage.setItem('token', 'fake-token');
      this.$router.push('/');
    }
  }
};
</script>

主页组件
在 Home.vue 中实现退出逻辑，清除 token 并返回登录页：

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

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

状态管理（可选）
如需全局管理登录状态，可使用 Vuex：

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    isAuthenticated: !!localStorage.getItem('token')
  },
  mutations: {
    setAuth(state, status) {
      state.isAuthenticated = status;
    }
  }
});

集成到组件
在登录和退出方法中调用 Vuex：

// Login.vue
methods: {
  handleLogin() {
    localStorage.setItem('token', 'fake-token');
    this.$store.commit('setAuth', true);
    this.$router.push('/');
  }
}

// Home.vue
methods: {
  handleLogout() {
    localStorage.removeItem('token');
    this.$store.commit('setAuth', false);
    this.$router.push('/login');
  }
}

注意事项

vue实现登录退出