Question

我正在开发一个拥有公共路线和管理路线的应用程序，在过去的CRA应用程序中，我们使用了自定义路线元素，但是nextjs却没有稀疏的东西……我们有很多公共页面，并且我们有20个私人页面/路线。

在nextjs中处理受保护的固定路线和公共路线的最佳方法是什么？

非常感谢！最好的

Answer 1

我个人一直在使用HOC（高阶分量）。

这是示例身份验证HOC：

const withAuth = Component => {
  const Auth = (props) => {
    // Login data added to props via redux-store (or use react context for example)
    const { isLoggedIn } = props;

    // If user is not logged in, return login component
    if (!isLoggedIn) {
      return (
        <Login />
      );
    }

    // If user is logged in, return original component
    return (
      <Component {...props} />
    );
  };

  // Copy getInitial props so it will run as well
  if (Component.getInitialProps) {
    Auth.getInitialProps = Component.getInitialProps;
  }

  return Auth;
};

export default withAuth;

您可以将此HOC用于任何页面组件。这是用法示例：

const MyPage = () => (
  <> My private page</>
);

export default withAuth(MyPage);

如果需要，您可以通过角色检查（如公共，常规用户和管理员）扩展withAuth HOC。

Answer 2

我认为这取决于页面的类型。

对于静态生成的页面：

您可以使用HOC进行身份验证，就像@AleXius建议的那样。

对于服务器端呈现的页面：

您可以在getServerSideProps中执行验证逻辑。

export async function getServerSideProps(context) {
  const sendRedirectLocation = (location) => {
    res.writeHead(302, {
      Location: location,
    });
    res.end();
    return { props: {} }; // stop execution
  };

  // some auth logic here
  const isAuth = await authService('some_type_of_token')

  if (!isAuth) {
    sendRedirectLocation('/login')
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

对于具有自定义服务器的服务器端呈现页面：

取决于服务器的选择，可以选择不同的解决方案。对于Express，您可能可以使用auth中间件。如果愿意，也可以在getServerSideProps中进行处理。

Answer 3

除了使用 HOC 的解决方案之外，您还可以使用 next 中的 ssr 方法，例如 getServerSideProps，如果您必须修改您的登录函数以在您的申请中设置标题（此标题将说明您是否已登录）像这样：

const signIng = async() =>{
...
    api.defaults.headers.someTokenName = token; //Here you can set something just to identify that there is something into someTokenName or your JWT token
...
}

然后在你的 withAuth 组件中：

const WithAuth = (): JSX.Element => {
  // ... your component code
}

export const getServerSideProps: GetServerSideProps = async(ctx) => {
  const session = await ctx.req.headers['someTokenName'];

 if(!session){
   return{
    redirect:{
      destination: '/yourhomepage', //usually the login page
      permanent: false,
    }
   }
 }

 return{
  props: {
   authenticated: true 
  }
 }
}

这应该可以防止您的 Web 应用程序从未经身份验证闪烁到经过身份验证

您如何在NextJS应用中处理公共和私人路线？

3 个答案: