无法读取未定义的属性“WebAuth”（Auth0错误）

时间：2018-04-01 22:49:16

标签： javascript authentication aurelia auth0

目前，在尝试将Auth0应用于我的Aurelia项目时，在运行项目时我遇到了这个错误：

Unhandled rejection Error: Error invoking AuthService. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: Cannot read property 'WebAuth' of undefined
Inner Error Stack:
TypeError: Cannot read property 'WebAuth' of undefined
    at new AuthService (http://localhost:9000/scripts/app-bundle.js:65:37)
    at Object.invoke (http://localhost:9000/scripts/vendor-bundle.js:24910:14)
    at InvocationHandler.invoke (http://localhost:9000/scripts/vendor-bundle.js:24874:168)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:25145:25)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:24591:37)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:25072:41)
    at Object.invoke (http://localhost:9000/scripts/vendor-bundle.js:24910:33)
    at InvocationHandler.invoke (http://localhost:9000/scripts/vendor-bundle.js:24874:168)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:25145:25)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:24591:37)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:25084:23)
    at http://localhost:9000/scripts/vendor-bundle.js:36220:73
    at tryCatcher (http://localhost:9000/scripts/vendor-bundle.js:3414:23)
    at Promise._settlePromiseFromHandler (http://localhost:9000/scripts/vendor-bundle.js:2630:31)
    at Promise._settlePromise (http://localhost:9000/scripts/vendor-bundle.js:2687:18)
    at Promise._settlePromise0 (http://localhost:9000/scripts/vendor-bundle.js:2732:10)
End Inner Error Stack
------------------------------------------------

    at new AuthService (http://localhost:9000/scripts/app-bundle.js:65:37)
    at Object.invoke (http://localhost:9000/scripts/vendor-bundle.js:24910:14)
    at InvocationHandler.invoke (http://localhost:9000/scripts/vendor-bundle.js:24874:168)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:25145:25)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:24591:37)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:25072:41)
    at Object.invoke (http://localhost:9000/scripts/vendor-bundle.js:24910:33)
    at InvocationHandler.invoke (http://localhost:9000/scripts/vendor-bundle.js:24874:168)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:25145:25)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:24591:37)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:25084:23)
    at http://localhost:9000/scripts/vendor-bundle.js:36220:73
    at new AggregateError (http://localhost:9000/scripts/vendor-bundle.js:27935:13)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:25147:15)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:24591:37)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:25072:41)
    at Object.invoke (http://localhost:9000/scripts/vendor-bundle.js:24910:33)
    at InvocationHandler.invoke (http://localhost:9000/scripts/vendor-bundle.js:24874:168)
    at Container.invoke (http://localhost:9000/scripts/vendor-bundle.js:25145:25)
    at StrategyResolver.get (http://localhost:9000/scripts/vendor-bundle.js:24591:37)
    at Container.get (http://localhost:9000/scripts/vendor-bundle.js:25084:23)
    at http://localhost:9000/scripts/vendor-bundle.js:36220:73
From previous event:
    at CompositionEngine.ensureViewModel (http://localhost:9000/scripts/vendor-bundle.js:36213:75)
    at CompositionEngine.createController (http://localhost:9000/scripts/vendor-bundle.js:36189:19)
    at CompositionEngine._createControllerAndSwap (http://localhost:9000/scripts/vendor-bundle.js:36164:19)
    at CompositionEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:36250:21)
    at TemplatingEngine.compose (http://localhost:9000/scripts/vendor-bundle.js:36513:38)
    at Aurelia.setRoot (http://localhost:9000/scripts/vendor-bundle.js:26015:21)
    at http://localhost:9000/scripts/app-bundle.js:217:20
From previous event:
    at Object.configure (http://localhost:9000/scripts/app-bundle.js:216:19)
    at http://localhost:9000/scripts/vendor-bundle.js:25337:22
From previous event:
    at config (http://localhost:9000/scripts/vendor-bundle.js:25332:48)
    at handleApp (http://localhost:9000/scripts/vendor-bundle.js:25323:12)
    at http://localhost:9000/scripts/vendor-bundle.js:25356:13
From previous event:
    at http://localhost:9000/scripts/vendor-bundle.js:25354:40
From previous event:
    at http://localhost:9000/scripts/vendor-bundle.js:25353:29
From previous event:
    at run (http://localhost:9000/scripts/vendor-bundle.js:25349:26)
    at Object.<anonymous> (http://localhost:9000/scripts/vendor-bundle.js:25376:3)
    at Object.execCb (http://localhost:9000/scripts/vendor-bundle.js:3829:299)
    at da.check (http://localhost:9000/scripts/vendor-bundle.js:3818:50)
    at da.enable (http://localhost:9000/scripts/vendor-bundle.js:3823:58)
    at Object.enable (http://localhost:9000/scripts/vendor-bundle.js:3827:433)
    at da.<anonymous> (http://localhost:9000/scripts/vendor-bundle.js:3822:436)
    at http://localhost:9000/scripts/vendor-bundle.js:3807:140
    at y (http://localhost:9000/scripts/vendor-bundle.js:3806:207)
    at da.enable (http://localhost:9000/scripts/vendor-bundle.js:3821:469)
    at da.init (http://localhost:9000/scripts/vendor-bundle.js:3816:154)
    at http://localhost:9000/scripts/vendor-bundle.js:3826:308

在这段代码中，在“new auth0.WebAuth”部分中出现错误。

import auth0 from 'auth0';
import { inject } from 'aurelia-framework';
import { Router } from 'aurelia-router';
//import { AUTH_CONFIG } from './auth0-variables';

@inject(Router)
export class AuthService {
  auth0 = new auth0.WebAuth({
    domain: 'contactmanager.eu.auth0.com',
    clientID: '-wNifn3x_VLZYLxvNmz8XBGxVwCeh703',
    redirectUri: 'http://localhost:3000/callback',
    audience: 'https://contactmanager.eu.auth0.com/userinfo',
    responseType: 'token id_token',
    scope: 'openid'
  });

  constructor(Router) {
    this.router = Router;
  }

  login() {
    this.auth0.authorize();
  }

  handleAuthentication() {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession(authResult);
        this.router.navigate('home');
        this.authNotifier.emit('authChange', { authenticated: true });
      } else if (err) {
        console.log(err);
        alert(`Error: ${err.error}. Check the console for further details.`);
      }
    });
  }

  setSession(authResult) {
    // Set the time that the access token will expire at
    let expiresAt = JSON.stringify(
      authResult.expiresIn * 1000 + new Date().getTime()
    );
    localStorage.setItem('access_token', authResult.accessToken);
    localStorage.setItem('id_token', authResult.idToken);
    localStorage.setItem('expires_at', expiresAt);
  }

  logout() {
    // Clear access token and ID token from local storage
    localStorage.removeItem('access_token');
    localStorage.removeItem('id_token');
    localStorage.removeItem('expires_at');
    this.router.navigate('home');
    this.authNotifier.emit('authChange', false);
  }

  isAuthenticated() {
    // Check whether the current time is past the
    // access token's expiry time
    let expiresAt = JSON.parse(localStorage.getItem('expires_at'));
    return new Date().getTime() < expiresAt;
  }
}

我一直在寻找类似问题的StackOverflow和互联网，但我还没有找到解决这个问题的方法，如果有人愿意提供某种答案或暗示可能导致错误我很感激。

提前致谢！

1 个答案:

答案 0 :(得分：2)

您的auth0对象为空 - 尚未导入。很可能是（正如评论中所提到的）你的Auth0包没有正确安装，或者你没有导入包，因为import语句不正确。

我让Auth0与Aurelia合作得很好，所以希望我的一个项目中的这些片段能够提供帮助。

来自我在依赖性部分的aurelia.json文件

  {
    "name": "auth0-js",
    "path": "../node_modules/auth0-js/build",
    "main": "auth0"
  }

然后就像你所做的那样，我有一个处理所有授权的AuthService类。在那个课程中我像这样导入：

import * as auth0 from 'auth0-js';

并新建了我的auth0对象：

    this.auth0 = new auth0.WebAuth({
    domain: AUTH_CONFIG.domain,
    clientID: AUTH_CONFIG.clientId,
    redirectUri: AUTH_CONFIG.callbackUrl,
    audience: AUTH_CONFIG.audience,
    responseType: 'token id_token',
    scope: 'openid profile user_metadata'
});

我建议您将Auth0配置设置放在单独的文件中并导入它：

import { AUTH_CONFIG } from './AuthServiceConfig';

此外，作为个人偏好的一点，我喜欢使用Aurelia Event Aggregator来通知Auth0登录和注销事件。我觉得它更适合Aurelia项目。

相关问题
最新问题