Question

我对 NextJs 很陌生。我熟悉 ReactJs 和 ProtectedRoute（我的自定义组件），使用 store token 进入 localstorage。

我的方案非常简单。我需要为用户资料和订单历史记录等少数页面实施 OTP 登录。其他页面将保持不受保护，如主页、产品列表、产品详细信息等。

我希望外部服务器登录端点返回令牌。我需要在成功接收令牌时允许受保护的路由并在手动注销之前使用它。

我对 next-auth 非常困惑，而且有太多的 auth 方法。

我尝试了以下方法。

<块引用>

钩子

import React from 'react';
import Router from 'next/router';
import Cookies from 'js-cookie';

const login = '/'; // Define your login route address.

/**
 * Check user authentication and authorization
 * It depends on you and your auth service provider.
 * @returns {{auth: null}}
 */
const checkUserAuthentication = () => {
    const accessToken = Cookies.get('token');

    if (accessToken === undefined) {
        return { auth: null }; // change null to { isAdmin: true } for test it.
    } else {
        return { auth: true };
    }
};

const WrappedComponent = () => {

    const hocComponent = ({ ...props }) => <WrappedComponent {...props} />;

    hocComponent.getInitialProps = async (context) => {
        const userAuth = checkUserAuthentication();

        // Are you an authorized user or not?
        if (!userAuth?.auth) {
            // Handle server-side and client-side rendering.
            if (context.res) {
                context.res?.writeHead(302, {
                    Location: login,
                });
                context.res?.end();
            } else {
                Router.replace(login);
            }
        } else if (WrappedComponent.getInitialProps) {
            const wrappedProps = await WrappedComponent.getInitialProps({ ...context, auth: userAuth });
            return { ...wrappedProps, userAuth };
        }

        return { userAuth };
    };

    return hocComponent;
};

export default WrappedComponent

<块引用>

//page/profile.js

import withAuth from "./withAuth";
export default withAuth(Profile);

问题是无法从 Cookie 中获取令牌 const accessToken = Cookies.get('token'); 总是 undefined。但是 Cookies 设置成功。

请给我建议简单的方法以及所有 nextjs 功能在哪里可以使用。

Nextjs auth 保护路由设置使用外部端点

0 个答案: