如何为一个特定角色拥有动态页面路由

Question

我正在构建一个具有许多不同角色（客户、艺术家、供应商、管理员）的网站。对于客户和管理员，我不希望您能够查看他们的个人资料。然而，对于艺术家和供应商，我希望您能够通过

domain.com/[role]/[displayname]

查看它们

我想利用页面路由来实现这一点，但我不确定如何最好地实现这一点，因为在无头 CMS 中，它们都被简单地管理为

users

，因此没有到此对象的 1:1 映射（例如：我不想要

domain.com/users/[userSlug]

）。

提前致谢。

Answer 1

后端必须在这里进行干预，只需让后端检查哪种用户正在检查其他人的个人资料，然后发回带有状态代码的响应，指示是否允许该用户查看个人资料，一个简单的示例：

在 next.js 中

// in /[role]/[displayname] page route

function SomeComponent(){
        let [isAuth, setIsAuth] = useState()
        useEffect(()=>{
         axios.get("domain.com/isauthenticated/",{withCredinitals:true}).then((res)=>{
         setIsAuth(res.data)
)
   
}.catch((e)=>{
   if(e.response.status == 401){
     setIsAuth(false)
}
}
)

},[])


if(isAuth){
return
 // render profile data here

}

return <div>NOT ALLOWED TO VIST PROFILE</div>

}

useEffect将使用凭据进行axios调用，这意味着会话cookie将被发送到后端，后端将需要验证您的会话cookie，无论您是否通过身份验证。

如果您未经过身份验证，那么您将无法查看这些个人资料

但是，如果您通过了身份验证，那么您在后端的工作就是检查该用户角色是否可以访问配置文件，当然，如果不允许，您可以简单地返回状态代码 401 的响应并设置如示例所示，将前端中的 auth 状态设置为 false。