Vue 项目中优雅实现用户登录及 Token 验证

2023-09-02 16:59:52

在 Vue.js 项目中实现安全的用户登录和令牌验证

理解令牌验证

令牌验证是一种保护网络应用程序安全的方法，它允许服务器在不存储用户密码的情况下验证用户的身份。服务器生成一个称为 JSON Web 令牌 (JWT) 的加密令牌，其中包含有关用户身份的信息。然后，将令牌存储在客户端，并在每次请求时发送回服务器。

在 Vue.js 中实现令牌验证

在 Vue.js 项目中实现令牌验证包括几个步骤：

创建服务器端 API： 设置一个 API 端点，用于处理用户登录和颁发 JWT 令牌。
实现用户登录： 创建一个 Vue.js 组件，用于收集用户凭据并将其发送到 API 端点。
存储和使用令牌： 将收到的 JWT 令牌存储在 Vuex 存储中，并将其添加到后续请求的标头中。
验证令牌： 在需要验证用户身份的组件中，检查令牌是否存在并是否有效。

实践示例

服务器端 API（Node.js）：

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

const app = express();

app.post('/login', async (req, res) => {
  const username = req.body.username;
  const password = req.body.password;

  if (username === 'admin' && password === 'password') {
    const token = jwt.sign({ username }, 'YOUR_SECRET_KEY');
    res.json({ token });
  } else {
    res.status(401).json({ error: 'Invalid credentials' });
  }
});

Vue.js 登录组件：

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

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

export default {
  methods: {
    ...mapActions(['login']),
    async login() {
      const { data } = await axios.post('/login', {
        username: this.username,
        password: this.password
      });

      this.login(data.token);
    }
  }
};
</script>

令牌验证组件：

<template>
  <div v-if="isAuthenticated">
    Authenticated!
  </div>
  <div v-else>
    Not authenticated. Please login.
  </div>
</template>

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

export default {
  computed: {
    ...mapGetters(['isAuthenticated'])
  },
  created() {
    const token = this.$store.getters.token;
    if (!token || jwt.decode(token).exp < Date.now() / 1000) {
      this.$store.dispatch('logout');
    }
  }
};
</script>