0

需要知道登录后设置不同流程的正确方法（甚至可能是一些不同的方法），只是不知道正确的开发方式最常用的是什么，到目前为止，我刚刚创建了一个登录表单以及用户是否验证了令牌和是管理员我设置了一个身份验证上下文，其中管理员为真且令牌有效，并且只为管理员用户显示不同的布局，或者如果它只是普通用户的其他布局，但我不确定这是否是创建管理的实际 ppl假设电子商店或博客可以使用仪表板。这种开关的最佳实践是什么？主要是在 react/nextjs 领域寻找建议，但也可以随意添加抽象建议，因为我只是缺乏这种一般设计的经验。下面是我的 _app 文件（根文件）的简化版本，项目是在 Nextjs 中完成的。会喜欢任何建议，

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;
4

1 回答 1

0

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;
于 2021-10-30T10:00:53.183 回答