当前位置：首页 > VUE

vue实现登录登出

2026-03-29 06:44:25VUE

Vue 实现登录登出功能

安装依赖

确保项目中已安装 Vue Router 和 Axios，用于路由管理和 HTTP 请求。通过以下命令安装：

npm install vue-router axios

配置路由

在 router/index.js 中配置登录和主页的路由，设置路由守卫进行权限控制：

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

const routes = [
  { path: '/', component: Home, meta: { requiresAuth: true } },
  { path: '/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 中实现登录表单和逻辑：

<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 axios from 'axios';

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('/');
      } catch (error) {
        alert('登录失败');
      }
    }
  }
};
</script>

登出功能实现

在需要登出的组件（如 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>

状态管理（可选）

对于复杂应用，建议使用 Pinia 或 Vuex 集中管理登录状态。以下是 Pinia 的示例：

// stores/auth.js
import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: localStorage.getItem('token') || null
  }),
  actions: {
    login(token) {
      this.token = token;
      localStorage.setItem('token', token);
    },
    logout() {
      this.token = null;
      localStorage.removeItem('token');
    }
  }
});

接口请求拦截

通过 Axios 拦截器自动添加 token 到请求头：

vue实现登录登出

// main.js 或单独文件
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});