Vue调用Okta的$auth.getAccessToken时报错then不是函数如何解决？

报错和this作用域无关 #

你在getUser的then回调中使用的是箭头函数，箭头函数不会创建独立的this上下文，会直接继承外层作用域的this指向，你代码中前面的this.$store.commit可以正常执行，已经证明this指向的Vue实例是完全正确的，报错和this作用域没有任何关系。

报错的核心原因 #

你使用的Okta Vue SDK版本中，getAccessToken()是同步方法，它会直接返回访问令牌字符串或者undefined，不会返回Promise对象。只有Promise对象才拥有.then方法，你对非Promise类型的返回值调用.then，自然会触发该类型错误。
而getUser()确实是异步方法，会返回Promise，所以可以正常调用.then。

为什么粘贴同步代码后可以正常运行 #

你补充的那段代码没有调用.then，是直接同步接收getAccessToken()的返回值，完全匹配该方法的行为，所以可以正常运行。

额外代码优化建议 #

你原来的用户判断逻辑存在错误：if (user == null && user == undefined)，null和undefined不可能同时成立，可以直接简化为if (!user)，即可覆盖null、undefined两种空值情况。

修正后的代码示例 #

created() {
    this.$store.commit('SET_LOADING_APP', true)

    this.$auth.getUser().then((user) => {
      // Set Okta user
      if (!user) {
        // no user
        this.$store.commit(
          'SET_RESPONSE_MSG',
          'Okta user is null or undefined.'
        )
        this.$store.commit('SET_RESPONSE_TYPE', 'error')
      } else {
        // store user
        this.$store.commit('SET_OKTA_USER', user)

        // 直接同步获取token，无需调用.then
        const token = this.$auth.getAccessToken()
        if (token) {
          this.$store.commit('SET_ACCESS_TOKEN', token)
          localStorage.setItem('token', JSON.stringify(token))
          apiClient.defaults.headers.common.Authorization = `Bearer ${token}`
        }
        
        // adName
        const adName = user.preferred_username.substr(
          0,
          user.preferred_username.indexOf('@')
        )
        this.$store.commit('SET_AD_NAME', adName)
        this.getUserInfo(adName)
      }
    })
  },

内容的提问来源于stack exchange，提问作者Eric Brown - Cal