【V3 Admin Vite】教程三：掌握登录模块（涉及 API、Axios、Pinia、路由守卫、鉴权）

前言

本系列文章是为了帮助没有直接上手（或上手比较困难）做项目能力的初级前端开发工程师采用 V3 Admin Vite 开源模板来编写业务代码。

如果你是一个有经验的朋友，那建议你直接阅读文档即可：V3 Admin Vite 中文文档，因为本系列教程节奏偏慢。

本系列文章的同步视频教程版本地址：B 站（群友好心录制）

文章目的

本文将通过登录模块教会你配置 api 接口、在页面上调用接口发起请求、Pinia 保存用户信息、经过路由守卫的拦截，成功跳转到首页、Token 鉴权，判断是否退出登录。

Begin

配置登录接口

建立目录结构

我们在 @/api 目录下找到 login 文件夹，没有的话就需要新建一个，这个文件夹即代表了登录模块（注意是登录模块，不止是登录接口。如果该模块下还有子模块的话，你可以继续往下面再建立子模块的文件夹）。然后再在 login 文件夹里面再建立一个 types 文件夹（这个文件夹专门放置和登录模块相关的 TS 类型）和 index.ts。

最后成果就像截图这样：

举一反三，如果复杂一点，假如我们有一个模块叫系统管理 system，里面有两个子模块，分别叫用户管理 user、角色管理 role，那么我们建立的目录大致就应该长这个样子：

编写 TS 类型

编写接口的 TS 类型，我们必须提前拿到接口的请求参数和响应数据的格式，这里就需要你的后端同事提供接口文档了。

这个项目本身的登录接口的类型定义如下：

请求数据类型 ILoginRequestData

export interface ILoginRequestData {
   
  /** admin 或 editor */
  username: "admin" | "editor"
  /** 密码 */
  password: string
  /** 验证码 */
  code: string
}

响应数据类型 LoginResponseData

export type LoginResponseData = IApiResponseData<{
    token: string }>

这里的意思是，将类型 { token: string } 作为泛型传递给类型 IApiResponseData，IApiResponseData 这个类型作为一个全局类型，被定义在 @/types/api.d.ts 文件里：

/** 所有 api 接口的响应数据都应该准守该格式 */
interface IApiResponseData<T> {
   
  code: number
  data: T
  message: string
}

最终响应数据类型 LoginResponseData 就相当于：

{
   
  code: number
  data: {
    token: string }
  message: string
}

类型写好后就如下图：

编写接口

我们发送请求是通过封装好的 Axios，所以第一步就是导入相关的方法

import {
    request } from "@/utils/service"

我们还需要上文写好的登录接口的类型，将其导入进来

import type * as Login from "./types/login"

然后就可以开始写接口了：

/** 登录并返回 Token */
export function