英文:
Auth0 How to see users role in react frontend
问题
我想查看用户拥有哪个角色，然后只在为该用户启用某个特定角色时在React中显示特定内容。
像这样：
if (user.role1) {
return (
<React.Fragment>
<h1>启用了角色 1</h1>
</React.Fragment>
);
}
我尝试使用管理 API 获取角色，但这不起作用。从单页应用程序调用管理 API 也不是一个好方法。我尝试将角色添加到元数据中，但我不知道如何访问这些角色。如何在元数据中访问这些角色？
英文:
I would like to see which role a user has, to then show things in react only if a certain role is enabled for that user.
Like this
if (user.role1) {
return (
<React.Fragment>
<h1>The role 1 is enabled</h1>
</React.Fragment>
)
};
I tried with the management API to get roles, but that doesn’t work. It is not good to call API management from single page applications either. I tried to add roles to the metadata, but I don’t know how to access those roles. How can I access the roles within the meta data?
答案1
得分: 2
以下是代码的翻译部分：
已解决
我在auth0库中添加了一个规则，如下所示：
exports.onExecutePostLogin = async (event, api) => {
const namespace = 'https://myroles.com';
if (event.authorization) {
api.idToken.setCustomClaim(`${namespace}/roles`, event.authorization.roles);
api.accessToken.setCustomClaim(`${namespace}/roles`, event.authorization.roles);
}
}
然后在React中，您可以在useAuth0()钩子中查看它：
import './App.css';
import './Loader.css';
import React from 'react';
import LoginButton from './Components/Login/Login';
import LogoutButton from './Components/Login/Logout';
import { useAuth0 } from "@auth0/auth0-react";
import MainHeader from './Components/MainHeader/MainHeader';
function App() {
const { user, isAuthenticated, isLoading } = useAuth0();
if (isLoading) {
return (
<React.Fragment>
<br/>
<div className="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</React.Fragment>
);
}
else if (!isAuthenticated) {
return (
<React.Fragment>
<MainHeader />
<h1>Please login!</h1>
<LoginButton />
</React.Fragment>
)
}
else if (isAuthenticated) {
// <GetRole id={user.sub}/>;
// GetRoleP(user.sub);
const roles = user['https://myroles.com/roles'];
let nsIsEnabled = roles.includes('nos-security');
if (nsIsEnabled){
return (
<React.Fragment>
<MainHeader />
<h1>Welcome {user.name}</h1>
<h1>Nos security enabled</h1>
<LogoutButton />
</React.Fragment>
)
} else {
return (
<React.Fragment>
<MainHeader />
<h1>Welcome {user.name}</h1>
<LogoutButton />
</React.Fragment>
)
};
};
}
export default App;
希望这能帮助您理解代码的翻译部分。如果您有任何其他问题，请随时提出。
英文:
SOLVED
i added a rule in the auth0 library like this
exports.onExecutePostLogin = async (event, api) => {
const namespace = 'https://myroles.com';
if (event.authorization) {
api.idToken.setCustomClaim(`${namespace}/roles`, event.authorization.roles);
api.accessToken.setCustomClaim(`${namespace}/roles`, event.authorization.roles);
}
}
then in react you can view it in the user from useAuth0() hook:
import './App.css';
import './Loader.css';
import React, { } from 'react';
import LoginButton from './Components/Login/Login';
import LogoutButton from './Components/Login/Logout';
import { useAuth0 } from "@auth0/auth0-react";
import MainHeader from './Components/MainHeader/MainHeader';
function App() {
const { user, isAuthenticated, isLoading } = useAuth0();
if (isLoading) {
return (
<React.Fragment>
<br/>
<div className="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</React.Fragment>
);
}
else if (!isAuthenticated) {
return (
<React.Fragment>
<MainHeader />
<h1>Please login!</h1>
<LoginButton />
</React.Fragment>
)
}
else if (isAuthenticated) {
// <GetRole id={user.sub}/>
// GetRoleP(user.sub);
const roles = user['https://myroles.com/roles'];
let nsIsEnabled = roles.includes('nos-security');
if (nsIsEnabled){
return (
<React.Fragment>
<MainHeader />
<h1>Welcome {user.name}</h1>
<h1>Nos security enabled</h1>
<LogoutButton />
</React.Fragment>
)
} else {
return (
<React.Fragment>
<MainHeader />
<h1>Welcome {user.name}</h1>
<LogoutButton />
</React.Fragment>
)
};
};
}
export default App;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论