当前位置：首页 > VUE

vue实现登录验证

2026-02-25 14:45:08VUE

Vue 实现登录验证的方法

使用 Vue Router 进行路由守卫

在 Vue 项目中，可以通过 Vue Router 的导航守卫（beforeEach）实现登录验证。如果用户未登录，则重定向到登录页面。

vue实现登录验证

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/views/Login.vue';
import Home from '@/views/Home.vue';

Vue.use(Router);

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

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token'); // 检查本地存储的 token
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next('/login'); // 未登录则跳转到登录页
  } else {
    next(); // 已登录则放行
  }
});

export default router;

表单验证与 API 请求

在登录页面中，可以通过表单验证和向后端发送请求实现登录逻辑。

vue实现登录验证

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

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await axios.post('/api/login', this.form);
        localStorage.setItem('token', response.data.token); // 存储 token
        this.$router.push('/home'); // 跳转到主页
      } catch (error) {
        console.error('登录失败:', error);
      }
    }
  }
};
</script>

使用 Vuex 管理登录状态

如果需要全局管理登录状态，可以使用 Vuex 存储用户信息和登录状态。

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isAuthenticated: false,
    user: null
  },
  mutations: {
    setAuth(state, payload) {
      state.isAuthenticated = payload.isAuthenticated;
      state.user = payload.user;
    }
  },
  actions: {
    login({ commit }, userData) {
      return axios.post('/api/login', userData).then(response => {
        commit('setAuth', {
          isAuthenticated: true,
          user: response.data.user
        });
        localStorage.setItem('token', response.data.token);
      });
    },
    logout({ commit }) {
      localStorage.removeItem('token');
      commit('setAuth', {
        isAuthenticated: false,
        user: null
      });
    }
  }
});

结合 Axios 拦截器验证 Token

在每次请求时，可以通过 Axios 拦截器自动附加 token 并处理未授权的响应。

// utils/axios.js
import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://your-api-url.com'
});

instance.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

instance.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login'; // 未授权则跳转到登录页
    }
    return Promise.reject(error);
  }
);

export default instance;