为 Nextjs 应用程序创建用户和管理员仪表板开关的最佳方法是什么？

Question

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

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;

为 Nextjs 应用程序创建用户和管理员仪表板开关的最佳方法是什么？

What is the best way to create user and admin dashbaord switch for Nextjs app?

reactjs

front-end-optimization

next.js