当前位置：首页 > VUE

vue 实现登录退出

2026-03-08 05:40:12VUE

实现登录功能

在Vue中实现登录功能通常需要结合前端表单和后端API交互。以下是一个基本实现示例：

安装axios用于HTTP请求：

npm install axios

创建登录表单组件：

<template>
  <div>
    <input v-model="username" placeholder="用户名">
    <input v-model="password" type="password" placeholder="密码">
    <button @click="handleLogin">登录</button>
  </div>
</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('/dashboard');
      } catch (error) {
        console.error('登录失败:', error);
      }
    }
  }
}
</script>

实现退出功能

退出功能主要是清除用户认证信息并跳转页面：

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

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

路由守卫配置

在路由配置中添加导航守卫来保护需要认证的页面：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      meta: { requiresAuth: true }
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

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

export default router;

状态管理（可选）

对于更复杂的应用，可以使用Vuex管理登录状态：

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');
    }
  },
  actions: {
    login({ commit }, credentials) {
      return axios.post('/api/login', credentials)
        .then(response => {
          commit('setToken', response.data.token);
        });
    },
    logout({ commit }) {
      commit('clearToken');
    }
  }
});

请求拦截器

为所有请求添加认证token：

vue 实现登录退出

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