Angular -ui заменить '?' с '#' при переадресации с facebook oauth

Когда пользователь нажимает кнопку входа в систему, которая перенаправляется на страницу входа в facebook, после успешного входа в систему facebook запускает URL-адрес redirect_uri, а пользователь снова находится в приложении.

Проблема в том, что ui-router (возможно) заменяет "?" с '#' в пути, поэтому

http://localhost/fbauth?access_token=xxx&code=yyy
становится
http://localhost/fbauth#access_token=xxx&code=yyy

Из-за этого я не могу использовать $stateParams для получения объекта с параметрами запроса.

Удивительно, когда я вручную вхожу в браузер или нажимаю ссылку на http://localhost/fbauth?access_token=xxx&code=yyy
все работает правильно, а u-router не заменяет "?" с '#'.

Я предполагаю, что это связано с самим сценарием перенаправления.

Может ли кто-нибудь указать мне, что я делаю неправильно, или как изменить поведение ui-router в этом случае?

Это состояние, которое обрабатывает перенаправление fb:

PS ui-router настроен на работу в режиме html5 с $locationProvider.html5Mode(true);

Ответы

Ответ 1

Вы можете добавить эту функцию разрешения в свое состояние, которое заменит хеш-url на строку запроса url:

resolve: {
    'urlFix': ['$location', function($location){
        $location.url($location.url().replace("#","?"));
     }]
}

Таким образом, URL-адрес /fbauth#access_token=123456&code=abcde&expires_in=99999999 будет перенаправлен автоматически
Стать /fbauth?access_token=123456&code=abcde&expires_in=99999999
$stateParams будет заполнено правильно.
Значение будет {access_token: "123456", code: "abcde", expires_in: "99999999"}
$location.url() не обновляется, если местоположение уже совпадает, поэтому состояние не будет перенаправляться, если нет #.

Полный код примера:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <meta charset="utf-8">
    <title>FBAUTH</title>
</head>
<body ng-app="app">
    <base href="/">
    <div ui-view></div>
    <script>
        angular.module('app', ['ui.router'])
            .controller('publicCtrl', ['$scope','$stateParams', function($scope, $stateParams) {
                // $stateParams should be correctly set (even for hash route)
                console.log($stateParams);
            }])
            .config(['$locationProvider','$stateProvider', function($locationProvider, $stateProvider){
                $stateProvider
                    .state("fbauth",
                    {
                        url: '/fbauth?access_token&code&expires_in',
                        templateUrl: 'fbauth.html',
                        controller: 'publicCtrl',
                        resolve: {
                            'urlFix': ['$location', function($location){
                                $location.url($location.url().replace("#","?"));
                            }]
                        }
                    });

                $locationProvider.html5Mode(true);
            }]);
    </script>
</body>
</html>

Ответ 2

Я бы не предпочел передавать параметры запроса (используя? mark) в маршрутизации на стороне клиента. Вместо этого вы можете использовать параметры route/state следующим образом:

http://localhost/#/fbauth/access_token/:access_token/code/:code

и вы можете получить доступ к этим значениям с помощью $stateParams. например ($stateParams.access_token)