Reactjs Auth0 SPA TypeError:无法读取属性'；idTokenPayload'；未定义的

尝试登录时，我的Gatsby+Auth0应用程序出错。以下是错误：

TypeError: Cannot read property 'idTokenPayload' of undefined
(anonymous function)
src/utils/auth.js:1
> 1 | import auth0 from "auth0-js"
  2 | import { navigate } from "gatsby"
  3 | 
  4 | const isBrowser = typeof window !== "undefined"

当我登录到我的应用程序时，它第一次工作，我可以看到authResult正在控制台记录正确的值，但当我单击任何路由或刷新页面时，它返回此错误。我一直工作得很好，直到今天早上，除了一些CSS样式之外，我没有做任何改变

这是我的auth.js文件：

import auth0 from "auth0-js"
import { navigate } from "gatsby"

const isBrowser = typeof window !== "undefined"

const auth = isBrowser
  ? new auth0.WebAuth({
      domain: process.env.AUTH0_DOMAIN,
      clientID: process.env.AUTH0_CLIENTID,
      redirectUri: process.env.AUTH0_CALLBACK,
      responseType: "token id_token",
      scope: "openid profile email",
    })
  : {}

const tokens = {
  accessToken: false,
  idToken: false,
  expiresAt: false,
}

let user = {}

export const isAuthenticated = () => {
  if (!isBrowser) {
    return
  }

  return localStorage.getItem("isLoggedIn") === "true"
}

export const login = () => {
  if (!isBrowser) {
    return
  }

  auth.authorize()
}

const setSession = (cb = () => {}) => (err, authResult) => {

  console.log(authResult);

  localStorage.setItem("userAuthID", authResult.idTokenPayload.sub)
  localStorage.setItem("userIdToken", 'Bearer '+authResult.idToken)
  if (err) {
    navigate("/")
    cb()
    return
  }

  if (authResult && authResult.accessToken && authResult.idToken) {
    let expiresAt = authResult.expiresIn * 1000 + new Date().getTime()
    tokens.accessToken = authResult.accessToken
    tokens.idToken = authResult.idToken
    tokens.expiresAt = expiresAt
    user = authResult.idTokenPayload
    localStorage.setItem("isLoggedIn", true)
    navigate("/account")
    cb()
  }

}

export const silentAuth = callback => {
  if (!isAuthenticated()) return callback()
  auth.checkSession({}, setSession(callback))
}

export const handleAuthentication = () => {
  if (!isBrowser) {
    return
  }

  auth.parseHash(setSession())
}

export const getProfile = () => {
  return user
}

export const logout = () => {
  localStorage.setItem("isLoggedIn", false)
  localStorage.removeItem("userIdToken");
  auth.logout()
}

这是我的callback.js文件：

import React, { Component } from 'react'
import { handleAuthentication } from "../utils/auth"
import { navigate } from 'gatsby';

export default class callback extends Component {

  componentDidMount() {
    handleAuthentication();
    setTimeout(() => {
      navigate('/account')
    }, 1500);
  }

  render() {
    return (
      <div>
        <div className="hero is-white is-fullheight">
          <div className="hero-body">
            <div className="container">
              <h1 className="title is-1 is-spaced has-text-centered logo-text">Fottom</h1>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

import React，{Component}来自“React”
从“./utils/auth”导入{handleAuthentication}
从“盖茨比”导入{navigate}；
导出默认类回调扩展组件{
componentDidMount（）{
手工验证（）；
设置超时（（）=>{
导航（“/account”）
}, 1500);
}
render（）{
返回(
福托姆
)
}
}

---

能帮我找到这里少了什么吗？谢谢

这里的问题是，您试图访问

authResult

的属性

idTokenPayload

，而之前没有检查

authResult

是否为空。在

setSession（）

函数中，如果出现错误，您将访问

authResult

。您应该仅在登录成功时设置localStorage项

请尝试以下代码：

const setSession=（cb=（）=>{}）=>（err，authResult）=>{
console.log（authResult）；
如果（错误）{
导航（“/”）
cb（）
返回
}
if（authResult&&authResult.accessToken&&authResult.idToken）{
localStorage.setItem（“userAuthID”，authResult.idTokenPayload.sub）//在错误控制后移动
localStorage.setItem（“userIdToken”，“Bearer”+authResult.idToken）//在错误控制后移动
让expiresAt=authResult.expiresIn*1000+new Date（）.getTime（）
tokens.accessToken=authResult.accessToken
tokens.idToken=authResult.idToken
tokens.expiresAt=expiresAt
user=authResult.idTokenPayload
setItem（“isLoggedIn”，true）
导航（“/帐户”）
cb（）
}
}

我同意@mhSangar的观点，即您可能只应在确保负载不为

null

后尝试访问负载

但我认为你所经历的问题还有另一个层面。您提到在刷新之前一切都正常，我假设是在尝试令牌刷新时。我猜问题在于

checkSession

方法

目前，它的调用方式如下：

auth.checkSession（{}，setSession（回调））

必须将配置作为第一个参数传递给该方法（而不仅仅是一个空对象）。当我在应用程序中调用它时，我会传递以下参数：

{
观众
回调URL，
clientID，
领域
}

尝试将这些参数传递给

auth.checkSession

，看看是否可以修复它

i、 e

export const silentAuth=callback=>{
如果（！isAuthenticated（））返回回调（）
auth.checkSession(
{
域：process.env.AUTH0\u域，
clientID:process.env.AUTH0\u clientID，
重定向URI:process.env.AUTH0\u回调，
受众：您的受众（看起来像AUTH0\u域/api/v2/）
},
设置会话（回调）
)
}