当前，当尝试将 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 和互联网上搜索了类似的问题，但我还没有找到具体的解决方案，如果有人愿意给出某种答案或提示可能导致问题的原因错误，我将不胜感激。
提前致谢!
最佳答案
您的 auth0 对象为 null - 尚未导入。很可能(如评论中所述)您的 Auth0 软件包未正确安装，或者您尚未导入该软件包，因为 import 语句不正确。
我的 Auth0 与 Aurelia 配合得很好，所以希望我的一个项目中的这些片段能够有所帮助。
来 self 的 aurelia.json 文件的依赖项部分
{
"name": "auth0-js",
"path": "../node_modules/auth0-js/build",
"main": "auth0"
}
然后就像您所做的那样，我有一个处理所有授权的 AuthService 类。在该类中，我像这样导入:
从'auth0-js'导入*作为auth0;
并新建我的 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 配置设置放入单独文件中的单独类中并将其导入:
从 './AuthServiceConfig' 导入 { AUTH_CONFIG };
此外，根据个人喜好，我喜欢使用 Aurelia 事件聚合器来通知 Auth0 登录和注销事件。我只是发现它更适合 Aurelia 项目的背景。
关于javascript - 无法读取未定义的属性 'WebAuth'(Auth0 错误)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49603343/