当前位置：首页 > VUE

vue node实现登录验证

2026-01-23 02:15:28VUE

Vue 和 Node.js 实现登录验证

前端部分 (Vue.js)

安装必要的依赖：

npm install axios vue-router vuex

创建登录表单组件 (Login.vue)：

vue node实现登录验证

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="username" placeholder="Username" />
    <input v-model="password" type="password" placeholder="Password" />
    <button type="submit">Login</button>
  </form>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const response = await axios.post('http://localhost:3000/login', {
          username: this.username,
          password: this.password
        });
        localStorage.setItem('token', response.data.token);
        this.$router.push('/dashboard');
      } catch (error) {
        console.error('Login failed:', error);
      }
    }
  }
}
</script>

配置路由和全局状态管理 (main.js)：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import App from './App.vue';

Vue.use(VueRouter);
Vue.use(Vuex);

const store = 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');
    }
  }
});

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

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

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

后端部分 (Node.js)

安装必要的依赖：

vue node实现登录验证

npm install express jsonwebtoken bcryptjs cors body-parser

创建服务器 (server.js)：

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
app.use(cors());
app.use(bodyParser.json());

const SECRET_KEY = 'your-secret-key';
const users = [
  {
    id: 1,
    username: 'admin',
    password: bcrypt.hashSync('admin123', 8)
  }
];

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  const user = users.find(u => u.username === username);

  if (!user) return res.status(404).send('User not found');

  const passwordIsValid = bcrypt.compareSync(password, user.password);
  if (!passwordIsValid) return res.status(401).send('Invalid password');

  const token = jwt.sign({ id: user.id }, SECRET_KEY, {
    expiresIn: 86400 // 24 hours
  });

  res.status(200).send({ token });
});

app.get('/protected', (req, res) => {
  const token = req.headers['x-access-token'];
  if (!token) return res.status(403).send('No token provided');

  jwt.verify(token, SECRET_KEY, (err, decoded) => {
    if (err) return res.status(500).send('Failed to authenticate token');
    res.status(200).send('Access granted to protected content');
  });
});

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