uni-app小程序在数据库中设置新增删除角色权限后，上线使用时报错cannot read properties of undefined (reading ‘role’)

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app小程序在数据库中设置新增删除角色权限后，上线使用时报错cannot read properties of undefined (reading ‘role’)

“permission”: { “read”: true, “create”: “‘fwzx_leader’ in auth.role && ‘fwzxch_CREATE’ in auth.permission”, “update”: true, “delete”: “‘fwzx_leader’ in auth.role && ‘fwzxch_DELETE’ in auth.permission” }, 在开发者工具中测试的时候，清除所有缓存之后，可以正常使用，但是预览手机端、pc端都不行，线上小程序使用时，重新退出登录还是出问题
cannot read properties of undefined（reading ‘role’）读取不到用户角色，这该怎么解决


Harmonyos Next教程
1 回复

在处理 uni-app 小程序中遇到的 cannot read properties of undefined (reading ‘role’) 错误时，这通常意味着你在尝试访问一个未定义（undefined）对象的 role 属性。这种问题通常发生在数据绑定或数据处理逻辑中。下面我将提供一个代码案例，展示如何在 uni-app 中安全地处理角色权限，并避免这类错误。

步骤 1: 确保数据初始化

首先，确保在组件或页面的 data 函数中正确初始化了所有可能使用的对象，特别是包含 role 属性的对象。例如，你可以在页面的 data 函数中初始化一个用户对象：

data() {
    return {
        userInfo: {
            role: null // 或者根据需要设置默认值，如 'guest'
        }
    };
}

步骤 2: 安全访问属性

在访问 role 属性之前，检查其父对象是否存在。你可以使用可选链（Optional Chaining）操作符 ?. 来安全地访问属性：

// 假设你有一个函数根据角色显示不同的内容
showRoleBasedContent() {
    const role = this.userInfo?.role;
    if (role) {
        if (role === 'admin') {
            console.log('Display admin content');
        } else if (role === 'user') {
            console.log('Display user content');
        } else {
            console.log('Display default content');
        }
    } else {
        console.error('User role is undefined');
    }
}

步骤 3: 处理后端数据

如果你从后端获取用户信息，确保在数据到达并处理之前，不会尝试访问未定义的属性。可以在数据请求的回调中安全地更新数据：

// 假设你使用uni.request从后端获取用户信息
uni.request({
    url: 'https://your-api-endpoint.com/user-info',
    success: (res) => {
        if (res.data && res.data.userInfo) {
            this.userInfo = res.data.userInfo;
            this.showRoleBasedContent();
        } else {
            console.error('Failed to fetch user info');
        }
    },
    fail: (err) => {
        console.error('Request failed', err);
    }
});

结论

通过上述步骤，你可以确保在 uni-app 中安全地处理角色权限，避免 cannot read properties of undefined (reading ‘role’) 错误。关键在于确保数据在使用前已被正确初始化，并且在访问深层嵌套属性时使用可选链操作符进行安全访问。同时，处理好从后端获取的数据，确保在数据到达前不执行依赖于这些数据的操作。

回到顶部