NextJS 受保护路由报错 Unexpected token o in JSON at position 1

问题根因 #

报错Uncaught SyntaxError: Unexpected token o in JSON at position 1的本质是：你调用setUserCookie时直接传入了user对象，js-cookie的set方法会自动将非字符串类型参数转为普通字符串，JS中对象直接转字符串的结果是[object Object]，这段字符串不是合法JSON格式，调用JSON.parse解析时读到第二个字符o就会触发语法错误。

修复步骤 #

• 第一步：修复setUserCookie逻辑，存入cookie前先将user对象序列化为JSON字符串

// userCookies.js
export const setUserCookie = (user) => {
    cookies.set("auth", JSON.stringify(user), {
        expires: 1 / 24,
    });
};

• 第二步：为getUserFromCookie增加异常捕获，避免非法cookie导致页面直接崩溃

// userCookies.js
export const getUserFromCookie = () => {
    const cookie = cookies.get("auth");
    if (!cookie) {
        return null;
    }
    try {
        return JSON.parse(cookie);
    } catch (err) {
        // 解析失败说明cookie内容非法，直接清除无效数据
        removeUserCookie();
        return null;
    }
};

• 第三步：优化useUser逻辑，避免未初始化完成就跳转
  当前你在useEffect中直接读取cookie判断登录状态的逻辑不合理，Firebase Auth初始化需要时间，未初始化完成前读到空cookie就跳转，会导致已登录用户被误踢到登录页：

// useUser.js
export default function useUser() {
    const [user, setUser] = useState(null);
    // 增加加载状态，避免操作未初始化的auth数据
    const [loading, setLoading] = useState(true);
    const router = useRouter();

    const logout = async () => {
        return firebase
            .auth()
            .signOut()
            .then(() => {
                router.push("/auth");
            })
            .catch((e) => {
                console.error(e);
            });
    };

    useEffect(() => {
        const cancelAuthListener = firebase.auth().onIdTokenChanged((user) => {
            if (user) {
                const userData = mapUserData(user);
                setUserCookie(userData);
                setUser(userData);
            } else {
                removeUserCookie();
                setUser(null);
            }
            // Auth状态确认完成，结束加载
            setLoading(false);
        });

        return () => {
            cancelAuthListener();
        };
    }, []);

    // 登录状态判断放到加载完成后执行
    useEffect(() => {
        if (!loading && !user) {
            router.push("/auth");
        }
    }, [loading, user, router]);

    return { user, logout, loading };
}

• 第四步：清除浏览器中已存入的非法auth cookie，或开启隐私模式测试新逻辑，避免旧的错误缓存影响验证。

内容的提问来源于stack exchange，提问作者cjmc