使用 Vuex 进行用户认证

在本章中，我们将使用 Vuex 存储机制实现用户登录和身份验证。

Vuex 是一个中心化的数据存储，我们的用户和文章数据将存放于此。存储中的状态可以被 Vue 项目内的任意页面或组件获取。每个 Vuex 存储都包含 state、mutations 和 actions。只有 mutations 可以通过 commit 方法访问状态变量。actions 是触发 mutations 的函数。在本章中，我们将为登录和身份验证实现类似的流程。为了实现登录，我们将使用 Axios 库向 RestAPI 发起 HTTP 请求。

API 接口地址为：https://conduit.productionready.io/api

我们将使用此 API 基础 URL 来获取用户数据。

现在，让我们开始吧！

安装 Axios 并进行配置

首先，我们需要安装 Axios 包，它允许我们在项目中向服务器发起 HTTP 请求，并返回一个 Promise。Axios 提供了对 HTTP 请求的便捷处理，包括完整的请求头配置。要安装它，请在项目目录中运行以下命令：

1npm install axios

我们将把 axios 模块的配置放在一个名为 api.js 的独立文件中。需要在 ./store 目录下创建一个名为 api.js 的文件。在该文件中，我们将配置 baseURL 选项，如下代码所示：

1import axios from "axios";
2
3export const api = axios.create({
4  baseURL: "https://conduit.productionready.io/api"
5});
6
7export function setToken(jwt) {
8  api.defaults.headers.common["Authorization"] = `Token ${jwt}`;
9}
10
11export function clearToken() {
12  delete api.defaults.headers.common["Authorization"];
13}

在这里，我们配置了两个函数：一个用于登录后设置授权令牌头，另一个用于登出或重新登录时清除授权令牌。