无法获得组件外部的redux状态
无法获得组件外部的redux状态
提问于 2021-05-14 12:32:41
我的auth用户的redux状态如下：
auth:{
user: {
created_at: "2021-05-12T06:08:57.000000Z"
email: "johndoe@gmail.com"
id: 1
name: "John Doe"
permissions: ["product-view", "product-create", "product-update", "product-destroy", "category-view",…]
role: "superAdmin"
role_id: 1
updated_at: "2021-05-12T06:08:57.000000Z"
}
}我正在尝试检查用户是否有权限，或者没有使用这个权限数组。为此，我创建了一个实用程序文件authUser.js，如下所示：
import _ from "lodash";
import { store } from "../store";
let adminRole = ["superAdmin", "admin"];
const state = store.getState();
const currentUser = state.auth.user;
export async function havePermission(permission) {
console.log("currentUser >>", currentUser);
console.log("permission >>", permission);
if (isAdmin()) {
return true;
}
if (_.includes(currentUser.permissions, permission)) {
return true;
}
}
export async function isAdmin() {
if (adminRole.includes(currentUser.role)) {
return true;
}
}
export default {
isAdmin,
havePermission,
};我把这个函数叫做
sidebar.jsx
import authUser from "../../../utils/authUser";
const Sidebar = () => {
return(
<div>
{console.log(` have permission called >>
${authUser.havePermission("product-view")}
`)}
{authUser.havePermission("view-name") &&
"Dummy Name"}
</div>
)
}我是作为export { persistor, store };出口商店的
目前，这些数据显示在console.log上。
currentUser >> {}
permission >> product-view
have permission called >> [object Promise]
currentUser >> {}
permission >> view-name找不到，为什么currentUser是空对象。如何解决此权限检查，因为它目前正在返回空对象，虽然我可以清楚地看到这个用户对象在redux选项卡上的值。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-14 12:47:46
在您的实用程序文件中，对getState()的调用将只在最初被调用，因此每当您试图访问currentUser时，您都将拥有默认状态，而不会使用自那以后应用的任何更新。
const state = store.getState();
const currentUser = state.auth.user;您将希望将上述调用移动到一个选择器中，该选择器将获得当前状态，并计算当前用户是否具有该权限，即
export async function havePermission(state, permission) {
console.log("currentUser >>", state.auth.user);
console.log("permission >>", state.auth.user.permissions);
if (isAdmin(state.auth.user)) {
return true;
}
if (_.includes(state.auth.user.permissions, permission)) {
return true;
}
return false;
}您可以使用来自react-redux的react-redux钩子，这将通过当前的redux状态，然后您可以将它传递给havePermission，以确定用户是否具有特定的权限。
import { useSelector } from "react-redux";
import {havePermission} from "../../../utils/authUser";
const Sidebar = () => {
const hasProductPermission = useSelector((state) => havePermission(state, "product-view"));
const hasViewNamePermission = useSelector((state) => havePermission(state, "view-name"));
return(
<div>
{console.log(` have permission called >>
${hasProductPermission}
`)}
{hasViewNamePermission &&
"Dummy Name"}
</div>
)
}此外，还可以将useSelector调用移动到自定义权限钩子中：
import { useSelector } from "react-redux";
import { havePermission } from "../../../utils/authUser";
const usePermission = (permission) => {
return useSelector((state) => havePermission(state, permission);
}const Sidebar = () => {
const hasProductPermission = usePermission("product-view");
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67534410
复制相关文章
相似问题
腾讯云开发者
