Angularjs Auth0和角度错误-无法初始化Auth0Angular。Auth0Lock或Auth0必须可用
我正在尝试使用Auth0进行用户身份验证,但将其添加到Angular项目时遇到问题。我正在将Angular1与Webpack一起使用,似乎没有正确加载Auth0。这是我的app.js文件的内容Angularjs Auth0和角度错误-无法初始化Auth0Angular。Auth0Lock或Auth0必须可用,angularjs,webpack,auth0,Angularjs,Webpack,Auth0,我正在尝试使用Auth0进行用户身份验证,但将其添加到Angular项目时遇到问题。我正在将Angular1与Webpack一起使用,似乎没有正确加载Auth0。这是我的app.js文件的内容 import 'jquery'; import 'bootstrap/dist/css/bootstrap.min.css'; import angular from 'angular'; import uiRouter from 'angular-ui-router'; import auth0 fro
import 'jquery';
import 'bootstrap/dist/css/bootstrap.min.css';
import angular from 'angular';
import uiRouter from 'angular-ui-router';
import auth0 from 'auth0-angular';
import lock from 'auth0-lock';
import cookies from 'angular-cookies';
import storage from 'angular-storage';
import jwt from 'angular-jwt';
import AppComponent from './app.component.js';
import Common from './common/common';
import Components from './components/components';
import './styles.scss';
angular.module('myApp', [
'auth0',
'ui.router',
'angular-storage',
'angular-jwt',
'app.common',
'app.components',
])
.directive('app', AppComponent)
.constant('API', 'http://localhost:8000')
.config(['$urlRouterProvider', 'authProvider', function ($urlRouterProvider, authProvider) {
authProvider.init({
domain: '.eu.auth0.com',
clientID: '',
loginState: 'login'
});
authProvider.on('loginSuccess', function ($location, profilePromise, idToken, store) {
profilePromise.then(function (profile) {
store.set('profile', profile);
store.set('token', idToken);
});
$location.path('/');
});
authProvider.on('loginFailure', function () {
$location.path('/login');
});
$urlRouterProvider.otherwise('/login');
}]).run(['$rootScope', 'auth', 'store', 'jwtHelper', '$urlRouterProvider', function ($rootScope, auth, store, jwtHelper, $urlRouterProvider) {
auth.hookEvents();
}]);
我相信我正在导入和加载auth0,所以我不明白为什么会发生这种情况。我想这是一个小的语法错误。我也遇到了这个问题。我使用的是webpack,但这里的核心问题是,在使用Angular Auth0模块之前,需要有Auth0 javascript文件 与此问题类似: 这是我为修复它而添加的网页包插件
module.exports = {
...
plugins: [
new webpack.ProvidePlugin({
"window.Auth0Lock": "auth0-lock",
}),
]
}
我是在同一个问题上运行的。不过,我使用require而不是import 无论如何,auth0角度模块在全局窗口对象上搜索auth0或auth0lock。通过使用require包含auth0锁(我猜在您的例子中也使用import),auth0lock模块不会绑定到全局窗口对象 解决方案是将auth0锁作为参数传递给auth0。这样,auth0 angular就可以使用它,而不会查看窗口对象 请参见如何将auth0lock作为第二个参数传递给authProvider.init()函数
var auth0lock = require('auth0-lock');
var angular = require('angular');
require('angular-cookies');
require('angular-route');
require('auth0-angular');
require('angular-storage');
require('angular-jwt');
angular.module('myapp', ['auth0', 'angular-storage', 'angular-jwt', 'ngRoute'])
.config(function(authProvider) {
authProvider.init({
domain: 'myauth0domain',
clientID: 'myclientid'
}, auth0lock);
})
.run(function(auth) {
auth.hookEvents();
});
下面的答案解决了您的问题吗?或者你还有别的办法吗?我遇到了完全相同的问题,但答案并没有为我解决。导入的工作是使用init方法的第二个参数来传递Auth0对象,而不是依赖全局窗口对象。