28、全栈应用开发：OAuth 认证、自动化测试与 TypeScript 编译器选项

全栈应用开发：OAuth 认证、自动化测试与 TypeScript 编译器选项

1. 添加 OAuth 认证

在应用中添加 OAuth 认证流程后，用户可以使用 GitHub 账户登录。登录后，用户能够维护自己的公共愿望清单。以下是实现这一功能的详细步骤：

1.1 修改 components/location-details/index.tsx 文件

首先，导入必要的模块：

import { useSession } from "next-auth";
import { useEffect, useState } from "react";
import Button from "components/Button";

interface WishlistInterface {
    // 定义愿望清单操作函数的接口
}

const LocationDetail = () => {
    const session = useSession();
    const [onWishlist, setOnWishlist] = useState<boolean>(false);
    const [loading, setLoading] = useState<boolean>(false);

    useEffect(() => {
        // 根据 location 的 on_wishlist 属性计算初始状态
        setOnWishlist(location.on_wishlist)