当前位置：首页 > VUE

vue登陆实现

2026-03-08 03:28:42VUE

Vue 登录实现

前端部分

创建登录表单组件
使用 Vue 的单文件组件（SFC）创建一个登录表单，包含用户名和密码输入框以及提交按钮。

<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>
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>

路由配置
在 Vue Router 中配置登录页和受保护的路由，确保未登录用户无法访问某些页面。

import Vue from 'vue';
import Router from 'vue-router';
import Login from './views/Login.vue';
import Dashboard from './views/Dashboard.vue';

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;

后端部分

API 接口
后端需要提供一个登录接口，验证用户凭据并返回令牌（Token）。

const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  if (username === 'admin' && password === '123456') {
    const token = jwt.sign({ username }, 'secret_key', { expiresIn: '1h' });
    res.json({ token });
  } else {
    res.status(401).json({ error: '用户名或密码错误' });
  }
});

app.listen(3000, () => console.log('Server running on port 3000'));

Token 验证中间件
对于需要身份验证的接口，使用中间件验证 Token。

function authenticateToken(req, res, next) {
  const token = req.headers['authorization'];
  if (!token) return res.sendStatus(401);

  jwt.verify(token, 'secret_key', (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
}

app.get('/api/protected', authenticateToken, (req, res) => {
  res.json({ message: '受保护的内容' });
});

状态管理

Vuex 存储用户状态
使用 Vuex 管理用户登录状态和 Token。

vue登陆实现

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

组件中使用 Vuex
在组件中调用 Vuex 的 Action 进行登录和登出操作。

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

export default {
  methods: {
    ...mapActions(['login', 'logout']),
    async handleLogin() {
      try {
        await this.login({
          username: this.username,
          password: this.password,
        });
        this.$router.push('/dashboard');
      } catch (error) {
        console.error('登录失败', error);
      }
    },
  },
};
</script>