如何从 ui.router 中的 URL 中提取 auth0 令牌答案

【问题标题】：How to extract auth0 Token from URL in ui.router如何从 ui.router 中的 URL 中提取 auth0 令牌
【发布时间】：2017-09-27 08:39:03
【问题描述】：

我有一个 angular1 应用程序，它使用 auth0.js 进行身份验证。当我的应用从 auth0 接收回调时，我想将令牌存储在我的 tokenService 中。

https://localhost:44316/Run#access_token=ufgdfgfdNCRfYBP&expires_in=86400&id_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL2Ryb2JsZXIuZXUuYXV0gDfgAuY29tLyIsInN1fgf6Imdvb2dsZS1vYXV0aDJ8MTAzOTAwNjAwNjI0MTg2MTIyMDAwIiwiYXVkIjoieU1XYUt3VmF1ckhsaU5hemZVM3c0QUtzV2hXVEFJSHIiLCJleHAiOjE0OTM0ODk0MDgsImlhdCI6MTQ5MzQ1MzQwOH0.NuRxvsOIoB5_zZLl5aZd7zYgAhXxpvEhXXDJ1dkurRo&token_type=Bearer

如何创建与 url 匹配的 ui.router 状态，以便我的解析可以处理请求并获取其他数据？

$stateProvider
        .state('RecieveAuth', {
            url: "",
            resolve: tokenresolve,
            controller: function($tate){
                $state.go("MainSite");
            },
            data: { requirelanguage: true, requireLogin: true },

        })

不起作用，如果我使用“/”作为 url 它不匹配“#accesstoken =”

我已经尝试在运行中进行处理，但在这个版本中，我不知道如何让控制器等待我的 http 调用完成。

非常感谢任何帮助。

【问题讨论】：

标签： angular angular-ui-router auth0

【解决方案1】：

在您的解析函数中，例如从任何工厂调用服务（其中 Data 是工厂）：

$stateProvider
    .state('RecieveAuth', {
        url: "",
        resolve: {
            content: function(Data) {
                return Data.isAuth()
            }
        },
        controller: function($tate){
            $state.go("MainSite");
        },
        data: { requirelanguage: true, requireLogin: true },

    })

在您的数据工厂中，isAuth() 函数可能如下所示：

let isAuth = function() {
    // Get Token from URL or local storage
    let urlParameters = $location.search();
    let token = '';

    if ( urlParameters.hasOwnProperty('accesstoken') ) {
      tokenSurvey = urlParameters['accesstoken'];
    }

    let deferred = $q.defer();
    $resource('Call your server with the token retrieved above').query().$promise.then( (data) => {
        //User successfully, auth, rreturn resolve promise
        deferred.resolve(data);
      },
      (error) => {
        // Eror during Auth, reject promise, state will not be loaded (you have to handle errors in this case)
        deferred.reject(error);
      });
    return deferred.promise;
  };

【讨论】：

【解决方案2】：

我找到了使用注射器的解决方法：

 $urlRouterProvider.otherwise(function ($injector, $location) {
        var state = $injector.get('$state');
        var $rootScope = $injector.get("$rootScope");
        var accountSvc = $injector.get("accountSvc");
        var tokenService = $injector.get("tokenService");

        console.log('location', $location, 'location.search()', $location.search());

        if ($location.$$url.indexOf('/access_token=') >= 0) {
            accountSvc.authenticateAndGetProfile(function () {
                tokenService.Reload();
                $rootScope.Authenticate();
                state.go('Folders');
            }, function () {
                state.go('Folders');

            });
        }
        return $location.path();
    });

【讨论】：