当前位置：首页 > VUE

网页登录实现vue

2026-03-09 01:41:14VUE

网页登录实现（Vue）

使用 Vue Router 和 Axios 实现基础登录

创建登录表单组件（Login.vue），包含用户名和密码输入框及提交按钮。表单提交时触发登录方法。

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="username" type="text" 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('/dashboard');
      } catch (error) {
        alert('登录失败');
      }
    }
  }
};
</script>

路由配置与导航守卫

在 router/index.js 中配置路由，并使用导航守卫保护需要认证的路由。

import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/components/Login';
import Dashboard from '@/components/Dashboard';

Vue.use(Router);

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

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

export default router;

状态管理（Vuex）

使用 Vuex 管理用户登录状态，存储 token 和用户信息。

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    token: null,
    user: null
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    },
    setUser(state, user) {
      state.user = user;
    }
  },
  actions: {
    login({ commit }, { username, password }) {
      return axios.post('/api/login', { username, password })
        .then(response => {
          commit('setToken', response.data.token);
          commit('setUser', response.data.user);
        });
    }
  }
});

表单验证

使用 Vuelidate 或自定义验证方法增强表单验证。

import { required, minLength } from 'vuelidate/lib/validators';

export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) }
  },
  methods: {
    handleLogin() {
      if (this.$v.$invalid) {
        alert('请填写正确信息');
        return;
      }
      // 登录逻辑
    }
  }
};

响应式处理

根据登录状态动态显示/隐藏导航栏内容。

<template>
  <div>
    <router-link v-if="!isAuthenticated" to="/login">登录</router-link>
    <button v-else @click="logout">退出</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['token'])
  },
  methods: {
    logout() {
      this.$store.commit('setToken', null);
      this.$router.push('/login');
    }
  }
};
</script>

安全增强

使用 HTTPS 传输数据，后端验证 token 有效性，设置 token 过期时间。前端定期检查 token 有效性或使用拦截器处理 token 刷新。

网页登录实现vue

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response.status === 401) {
      localStorage.removeItem('token');
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

以上方法可根据实际项目需求组合或调整，实现完整的 Vue 登录功能。