Угловой UI-Router $urlRouterProvider . Когда не работает * больше *

Вопрос: почему не .when() в моем $urlRouterProvider работать больше?

Я выбрал довольно надежное угловое приложение. Самой последней проблемой, которую я пытался исправить, была проблема "Учетные данные пользователя теряются при обновлении страницы".

Служба аутентификации проекта не имела особого смысла, когда я поднял ее и, покопавшись, узнал, что она составлена ​​из нескольких случайных страниц кода. Это также не работало полностью, поэтому я изучил различные источники и решил полностью реализовать один из них ( https://github.com/fnakstad/angular-client-side-auth/)

Теперь реализованный мной сервис / контроллер аутентификации в основном такой же, как в angular-client-side-auth, однако сайт, на котором я работаю, использует аутентификацию на основе токенов. Функциональность токена уже существовала, поэтому у меня не было никаких проблем, чтобы заставить его работать.

На данный момент у меня есть пользователь, который остается в системе при обновлении, маршруты работают вместе с их аутентификацией (ранее использовался громоздкий код для отключения видимых элементов). Однако теперь $urlRouterProvider .when() s сломаны. Раньше они прекрасно работали, поэтому я знаю, что сделал что-то по вине - но я не могу просто отменить то, что реализовал!

Так что это код $ urlRouterProvider, который я использую. Стоит отметить, что я включил / потребовал .when() тогда как https://github.com/fnakstad/angular-client-side-auth/, похоже, не использует их. Я ожидал, что они могли бы быть реализованы с этим кодом, однако, возможно, в нем есть что-то, что лишает функциональность .when()? Я так не думаю. Можно также уточнить, что я не использую .rule или же $httpProvider.interceptors там еще нет. Я пытался использовать сайт с этими функциями, но, похоже, они ничего не изменили.

$urlRouterProvider
   .when('/myState/group', ['$state', 'myService', function ($state, myService) {
            $state.go('app.myState.group.id', {id: myService.Params.id});
   }])
   .otherwise('/');

Таким образом, в основном, если пользователь или сайт направляет пользователя к /myState/group, они должны в конечном итоге в URL для государства app.myState.group.id право? Хотя они этого не делают, и я не могу понять, почему. Существует не так много проблем с использованием urlRouterProvider.

Что происходит? Ну вид на /myState/group грузит нормально, а внутри это <ui-view> это сгенерированный список id "S. Вы можете нажать на идентификатор, который вызывает функцию, которая устанавливает идентификатор, а затем выполняет $state.go('app.myState.group.id', {id: group.id, std: $scope.std1}); Это состояние, конечно, заменяет "сгенерированный список", по которому щелкнул пользователь.

Теперь для .state() "S...

.state('app.myState', {
            abstract: true,
            url: '/myState',
            templateUrl: 'views/myState.html',
            data: {
                access: access.user
            },
            controller: 'MyCtrl',
            resolve: {
                // bunch of stuff here, I'll include it if it's relevant                    
            },
            redirectMap: {
                '409': 'app.error'
            }
        })
        .state('app.myState.group', {
            url: '/group',
            templateUrl: 'views/myState.group.html',
            data: {
                access: access.user
            }
        })
        .state('app.myState.group.id', {
            url: '/:id',
            templateUrl: 'views/myState.group.id.html',
            data: {
                access: access.user
            },
            resolve: {
                '': function (myService) {
                    myService.stuff.get(false, false, 7, 0).then(function (data) {
                    });
                }
            },
            controller: 'MygroupidCtrl'
        })

В заключение, index.html

<li ng-class="{active: $state.includes('app.myState')}"> <a ui-sref="app.myState.group">My State</a> </li>

Почему-то я чувствую, что есть лучший способ структурировать это. Из того, что я могу сказать, app.myState.group на самом деле никогда не нужен сам по себе, это просто часть вложенности.

Я пытался просто изменить ui-sref в ="app.myState.group.id", Когда это не сработало, я тоже изменился $state.includes('app.myState')} в $state.includes('app.myState.group')}, Нету. Это жизнеспособно? Я знаю, что мне нужно как-то передать удостоверение личности, но оно даже не похоже на руководство.

В идеале я хотел бы ограничить количество ненужных состояний (и контроллеров.. и всего). Поскольку предполагается, что пользователь должен /myState/group/id когда они нажимают на ссылку, я чувствую, что это должно произойти. Не эта ссылка на другое состояние, а затем перенаправление!

Тем не менее, я больше беспокоюсь о том, чтобы просто заставить это работать в данный момент, и я могу беспокоиться о том, чтобы привести в порядок вещи позже.

РЕДАКТИРОВАТЬ

Поэтому, когда я писал вопрос, у меня было еще несколько идей о том, что можно попробовать. Один из них действительно работал!

.state('app.myState.group', {
            url: '/group',
            templateUrl: 'views/myState.group.html',
            data: {
                access: access.user
            },
            onEnter: ['$state', '$timeout', 'myService', function ($state, $timeout, myService) {
                $timeout(function () {
                     $state.go('app.myState.group.id', {id: myService.Params.id})
                }, 1000);
            }]

Мне это нравится, хотя я все еще задаюсь вопросом, есть ли другие способы сделать это. Мне также все еще интересно, почему перестал работать $ urlRouterProvider!

Источник

1 ответ

Решение

РЕДАКТИРОВАТЬ: версия 0.2.13 - критическое изменение

Оригинальный пост работал с UI-Router 0.2.12-. Исправление в 0.2.13 отключает это решение. Пожалуйста, следуйте обходному пути здесь:

Angular UI-Router $ urlRouterProvider. Когда не работает, когда я нажимаю ;

ОРИГИНАЛ:

Я обнаружил одну проблему, вызывающую аналогичную проблему. Есть рабочий пример с полным кодом

Во-первых, давайте настроим две функции

  • $urlRouterProvider а также
  • $stateProvider

Фрагмент этих определений:

// when config for $urlRouterProvider
var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {

    $urlRouterProvider
      .when('/app/list', ['$state', 'myService', function ($state, myService) {
            $state.go('app.list.detail', {id: myService.Params.id});
    }])
    .otherwise('/app');
}];

// state config for $stateProvider
var stateConfig = ['$stateProvider', function($stateProvider) {

  $stateProvider
    .state('app', {
        url: '/app',
        ...
}];

Имея это, сообщаемое поведение произойдет, если мы будем называть их так:

angular.module('MyApp', [
  'ui.router'
])
// I. firstly the states
.config(stateConfig)
// II. then the WHEN
.config(whenConfig)

Вышеуказанный вызов не будет работать. Когда не будет вызывать состояние детализации при посещении списка.

Но это будет работать, как и ожидалось:

angular.module('MyApp', [
  'ui.router'
])
// I. firstly WHEN
.config(whenConfig) 
// II. only then call state config
.config(stateConfig)

Проверьте это здесь. Увидеть app.jsфайл...

РЕЗЮМЕ:Сначала мы просто должны настроить$urlRouterProvider, Только тогда мы можем начать заполнять наши государства через $stateProvider, Такой подход приведет к ожидаемому поведению.

Источник
Другие вопросы по тегам