Vue.js JWT 身份验证示例

本示例将演示如何在 Vue.js 应用程序中实现 JWT 身份验证。

什么是 JWT？

JWT（JSON Web Token）是一种在客户端和服务器之间传输安全信息的开放标准。JWT 可以签名，以保证信息在传输过程中不被篡改。

步骤

1. 安装依赖

在命令行中运行以下命令来安装需要的依赖：

npm install vue-router axios vue-axios jwt-decode

2. 创建路由

在 src/router/index.js 中创建项目的路由。

例如：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
  },
  {
    path: '/profile',
    name: 'Profile',
    component: () => import('../views/Profile.vue'),
    meta: {
      requiresAuth: true,
    },
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

在上面的代码中，我们定义了三个路由：Home、Login 和 Profile。其中 Profile 路由被标记为需要身份验证才能访问。

3. 创建 axios 实例

在 src/main.js 中创建 axios 实例：

import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

// 拦截器
axios.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }

    return config;
  },
  (error) => Promise.reject(error),
);

Vue.config.productionTip = false;

在上面的代码中，我们定义了 axios 的拦截器，以在每个请求中添加身份验证信息。

4. 创建 Login 组件

在 src/views/Login.vue 中定义 Login 组件：

<template>
  <div>
    <h1>Login Page</h1>
    <form @submit.prevent="loginUser">
      <input type="text" name="email" v-model="email" placeholder="Email" />
      <input type="password" name="password" v-model="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';
import jwt_decode from 'jwt-decode';

export default {
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    async loginUser() {
      try {
        const response = await axios.post('/login', {
          email: this.email,
          password: this.password,
        });

        const { token } = response.data;
        localStorage.setItem('token', token);

        const user = jwt_decode(token);
        this.$store.dispatch('loginUser', user);

        this.$router.push('/profile');
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

在上面的代码中，我们使用了 axios 发送一个 POST 请求来登录用户。我们通过 jwt_decode 库来解码传回的 JWT 并将其储存在 Local Storage 中。

5. 创建 Profile 组件

在 src/views/Profile.vue 中定义 Profile 组件：

<template>
  <div>
    <h1>Profile Page</h1>
    <p>Email: {{ user.email }}</p>
    <button @click="logoutUser">Logout</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapGetters(['user']),
  },
  methods: {
    logoutUser() {      
      localStorage.removeItem('token');
      this.$store.dispatch('logoutUser');
      this.$router.push('/login');
    },
  },
};
</script>

在上面的代码中，我们定义了一个 "Logout" 按钮，该按钮会删除 Local Storage 中的 JWT，并退出用户会话。

6. 创建 Store

在 src/store/index.js 中定义 Vuex Store：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user;
    },
    REMOVE_USER(state) {
      state.user = null;
    },
  },
  actions: {
    loginUser({ commit }, user) {
      commit('SET_USER', user);
    },
    logoutUser({ commit }) {
      commit('REMOVE_USER');
    },
  },
  getters: {
    user: (state) => state.user,
  },
});

在上面的代码中，我们定义了一个 Vuex Store 用于管理用户登录状态。我们在应用程序中存储了当前用户的数据，并实现了两个操作：loginUser 和 logoutUser。

7. 添加身份验证

最后，在 src/main.js 中添加身份验证逻辑：

// 管理用户的身份验证状态
router.beforeEach((to, from, next) => {
  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
  const currentUser = localStorage.getItem('token');

  if (requiresAuth && !currentUser) {
    next('/login');
  } else {
    next();
  }
});

在上面的代码中，我们添加了一个全局路由守卫，以确保只有已登录的用户才能访问标记为需要身份验证的组件。

现在我们已经将 JWT 身份验证添加到了 Vue.js 应用程序中。现在访问 Profile 组件时，即只有已登录的用户才能访问该组件。

完整代码可在 https://github.com/jwt/examples/tree/master/vuejs-jwt-authentication-example 中获取。