Nuxt+Firebase自定义声明实现角色导航时设置isSubcon报undefined错如何解决

你的报错是this指向丢失导致的：在getIdTokenResult的回调中你使用了普通函数function () {}声明，普通函数会绑定独立的执行上下文，此处的this不指向Vue组件实例，所以访问this.isSubcon时this为undefined，触发类型错误。

有两种常用修复方式，推荐优先用箭头函数的方案：

方案1：将普通回调替换为箭头函数 #

箭头函数不会绑定独立的this，会继承外层作用域的this指向，刚好可以拿到Vue组件实例。
修复后的完整script逻辑如下：

data: () => ({
    isSubcon: false,
    isWPC: false,
    isBWG: false,
}),

created() {
    firebase
        .auth()
        .onAuthStateChanged((userAuth) => {
            if (userAuth) {
                // 直接用返回的userAuth调用方法，避免重复取currentUser可能的异步问题
                userAuth.getIdTokenResult()
                    // 这里把普通function换成箭头函数
                    .then(({ claims }) => {
                        if (claims.customer) {
                            this.isSubcon = true;
                        } else if (claims.admin) {
                            this.isWPC = true;
                        } else if (claims.subscriber) {
                            this.isBWG = true;
                        }
                    })
            }
        });
},

方案2：提前存储组件实例指向 #

如果你需要保留普通函数写法，可以在回调外层提前把组件实例的this存为变量，回调内用该变量访问属性：

created() {
    // 提前存储组件this指向
    const vm = this;
    firebase
        .auth()
        .onAuthStateChanged((userAuth) => {
            if (userAuth) {
                userAuth.getIdTokenResult()
                    .then(function ({ claims }) {
                        if (claims.customer) {
                            vm.isSubcon = true;
                        } else if (claims.admin) {
                            vm.isWPC = true;
                        } else if (claims.subscriber) {
                            vm.isBWG = true;
                        }
                    })
            }
        });
},

修改后组件的三个布尔状态可以被正常赋值，模板中v-if绑定的导航列表会匹配对应角色正常渲染，导航抽屉即可展示对应内容。

内容的提问来源于stack exchange，提问作者user16136444