为 Next Js 应用程序创建用户和管理仪表板开关的最佳方法是什么？ [关闭]

Question

需要知道登录后设置不同流程的正确方法（甚至可能是一些不同的方法），只是不知道正确的开发方式最常用的是什么，到目前为止，我刚刚创建了一个登录表单，如果用户验证令牌并且是管理员我设置了一个身份验证上下文，其中管理员为真且令牌有效，并且只为管理员用户显示不同的布局，或者如果它只是普通用户的其他布局，但我不确定这是否是实际的 ppl谁为 eshops 或博客创建管理仪表板就可以了。这种开关的最佳实践是什么？主要是在 react/nextjs 领域寻找建议，但也可以随意添加抽象建议，因为我只是缺乏这种一般设计的经验。下面是我的 _app 文件（根文件）的简化版本，项目是在 Nextjs 中完成的。会喜欢任何建议，因为我在为我的博客应用程序创建可靠的架构时遇到了麻烦，普通用户只能看到帖子和评论，但管理员有 DASHBOARD 并且可以 CRUD，即使我已经有了组件和 api 现在我被卡住了在如何在前端将这些分开而不犯一些大的新手错误，并且在我部署到 live 时只是自欺欺人。

function MyApp(props) {
  const {token, login, logout, userId, admin} = useAuth();

  if(admin === 'true') {
    return (
      <React.Fragment>
      <AuthContext.Provider
            value={{
                isLoggedIn: !!token,
                token: token,
                userId: userId,
                admin: admin,
                login: login,
                logout: logout
              }}
              >
          <AdminNavigation>
              <Component {...pageProps} />
          </AdminNavigation>
      </AuthContext.Provider>    
    </React.Fragment>
  );
} else {
  return (
    <React.Fragment>
      <AuthContext.Provider
            value={{
              isLoggedIn: !!token,
              token: token,
              userId: userId,
              admin: admin,
              login: login,
              logout: logout
            }}
            >
          <MainNavigation />
            <Layout>
              <Component {...pageProps} />
            </Layout>
      </AuthContext.Provider>
    </React.Fragment>
  );
}
}

export default MyApp;

Answer 1

您可以在一个return 语句中保留这两种情况的共同部分。然后可以使用三元运算符?+:在两个条件之间切换：

function MyApp(props) {
  const {token, login, logout, userId, admin} = useAuth();

  return (
    <React.Fragment>
      <AuthContext.Provider
            value={{
                isLoggedIn: !!token,
                token: token,
                userId: userId,
                admin: admin,
                login: login,
                logout: logout
              }}
              >

          {admin === 'true' 
          ? ( <AdminNavigation>
                <Component {...pageProps} />
            </AdminNavigation>)


          : (<>
            <MainNavigation />
            <Layout>
              <Component {...pageProps} />
            </Layout>
            </>)}

      </AuthContext.Provider>    
    </React.Fragment>
  )
}

export default MyApp;