Nuxt3请求接口封装+自动带上Token(2024)

Ts类型type.ts

export type Options = {
    key?: string,
    body?: object,
    lazy?: boolean,
    baseURL?: string,
    server?: boolean,
    initialCache?: boolean,
    headers?: { [key: string]: string },
    method?: 'GET' | 'HEAD' | 'PATCH' | 'POST' | 'PUT' | 'DELETE' | 'CONNECT' | 'OPTIONS' | 'TRACE'
}
export const useGetFetchOptions = (options: Options) => {
    options.baseURL = options.baseURL ?? httpConfig.baseURL
    options.initialCache = options.initialCache ?? false
    options.lazy = options.lazy ?? true
    options.server = options.server ?? true
    const token = useCookie('token')
    if (token.value) {
        options.headers = {
            token: token.value
        }
    }
    return options
}

请求封装useFetch.ts

import { useGetFetchOptions, type Options } from './type'
/**
 * 请求
 * 
 * @param key 请求key
 * @param url 请求url
 * @param options 请求设置
 */
export const useHttp = async <T>(key: string, url: string, options: Options = {}) => {
    options = useGetFetchOptions(options)
    options.key = key
    const res = await $fetch<R<T>>(url, { ...options })
    return res
}
/**
 * Get请求
 * 
 * @param key 请求key
 * @param url 请求url
 * @param options 请求设置
 */
export const useFetchGet = <T>(key: string, url: string, options: Options = {}) => {
    options.method = 'GET'
    return useHttp<T>(key, url, options)
}
/**
 * Post请求
 * 
 * @param key 请求key
 * @param url 请求url
 * @param options 请求设置
 */
export const useFetchPost = <T>(key: string, url: string, options: Options = {}) => {
    options.method = 'POST'
    return useHttp<T>(key, url, options)
}

接口类型R.ts

/**
 * 返回集合VO
 */
export interface List<T> {
    /**
     * 数据
     */
    data: {
        /**
         * 数据集合
         */
        list: T[],
        /**
         * 当前页码
         */
        pageNum: number,
        /**
         * 总页数
         */
        pages: number,
        /**
         * 总数据量
         */
        total: number,
        /**
         * 每页条数
         */
        pageSize: number,
        /**
         * 是否最后一页
         */
        last: boolean
    },
    /**
     * 消息
     */
    msg: string,
    /**
     * 状态码
     */
    code: number
}
/**
 * 返回对象
 */
export interface Data<T> {
    /**
     * 数据
     */
    data: T,
    /**
     * 消息
     */
    msg: string,
    /**
     * 状态码
     */
    code: number
}
/**
 * 联合类型
 */
export type R<T> = List<T> & Data<T>

使用方法

根目录新建apis目录,在里面新建一个link.ts

/**
 * 已审核友情链接列表
 */
export const linkApi = (p = 1) => {
    return useFetchRefPost<LinksVo>('linksApi', '/link/list', {
        body: { pageNum: p, pageSize: 30 }
    })
}

在vue文件中使用

const { list, pending, total, pageNum, pageSize } = await linkApi(pageCount)

Token说明

注意看下面这段代码

//如果token存在 headers添加token
const token = useCookie('token')
if(token.value) {
    options.headers = {
        token:token.value
    }
}

Token是从Cookie中获取的

所以储存的时候请将Token存入Cookie

Token储存

//用户登录
const data = await loginApi(email,password)
//获取token并且存储
const token = useCookie('token')
token.value = data.data.token