Auth0 和 Angular 错误 - 无法初始化 Auth0Angular。 Auth0Lock 或 Auth0 必须可用答案

【问题标题】：Auth0 and Angular error - Cannot initialize Auth0Angular. Auth0Lock or Auth0 must be availableAuth0 和 Angular 错误 - 无法初始化 Auth0Angular。 Auth0Lock 或 Auth0 必须可用
【发布时间】：2016-10-04 02:29:40
【问题描述】：

我正在尝试使用 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 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，所以我不明白为什么会这样。我认为这是一个轻微的语法错误..

【问题讨论】：

以下答案是否解决了您的问题？或者你有其他解决方法吗？我遇到了完全相同的问题，但答案并没有为我解决。

标签： angularjs webpack auth0

【解决方案1】：

我遇到了同样的问题。不过，我使用 require 而不是 import。

无论如何，auth0-angular 模块在全局窗口对象上搜索 auth0 或 auth0lock。通过使用 require 包含 auth0-lock （我猜你的情况下也使用 import ），auth0lock 模块不会绑定到全局窗口对象。

解决方案是将 auth0-lock 作为参数传递给 auth0-angular。这样，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();
  });

【讨论】：

与 import 一起工作的事情是使用 init 方法的第二个参数来传递 Auth0 对象，而不是依赖全局窗口对象。

【解决方案2】：

我也遇到了这个问题。我使用的是 webpack，但这里的核心问题是您需要 Auth0 javascript 文件在 Angular Auth0 模块之前可用。

类似这个问题：Managing jQuery plugin dependency in webpack.

这是我为修复它而添加的 webpack 插件。

module.exports = {
  ...
  plugins: [
    new webpack.ProvidePlugin({
        "window.Auth0Lock": "auth0-lock",
    }),
  ]
}

【讨论】：