Squeak.ru - шаблоны программирования

Невозможно перенаправить на новую страницу, используя $location.path с логином Firebase

Проблема: при входе в Firebase я хотел бы перенаправить пользователя на новую страницу. Я пытаюсь использовать $location.path() в своем контроллере, даже если пытался использовать $state.go(). Но, похоже, бесполезно. Также я не получаю никаких ошибок в консоли.

Используя метод Firebase signInWithEmailAndPassword, Angularjs 1.5, ui-router и AngularFire.

логин.service.js

var firebaseAuthObject = fbDbConn.auth();
function login(emailid, passwd) {
  return firebaseAuthObject.signInWithEmailAndPassword(emailid, passwd);    
}

логин.controller.js

(function() {
  'use strict';

  angular
    .controller('AuthController', AuthController);

  AuthController.$inject = ['$scope', '$location', 'authService'];

  function AuthController($scope, $location, authService) {
    $scope.message = null;
    $scope.error = null;

    $scope.register = function() {
        return authService.register($scope.email, $scope.password)
        .then(function(userData) {
            $scope.message = "User created with uid: " + userData.uid;
        }).catch(function(error) {
            $scope.error = error;console.log(error);
        });
    };

    $scope.login = function() { 
        $scope.auth_error ="";
        return authService.login($scope.email, $scope.password)
        .then(function(authData) {
            $location.path('/app/overview');    //$state.go('/app/overview');
        }).catch(function(error) {console.log(error);
            $scope.error = error;
            $scope.auth_error = "Username or Password is wrong.";
        });
    };

    $scope.logout = function() {console.clear();
        authService.logout();
        $location.path('/login');
    };

  }

})();

config.route.js

(function() {
  'use strict';

  angular
    .module('singApp.login', ['ui.router','firebase'])
    .config(configFunction)
    .run(runFunction);

  configFunction.$inject = ['$stateProvider'];

  function configFunction($stateProvider) {    
    $stateProvider
      .state('login', {
        url: '/login',
        templateUrl: 'app/modules/login/login.html'
      })
  }

  runFunction.$inject = ['$location', 'authService', 'firebaseDataService', 'PROTECTED_PATHS'];

  function runFunction($location, authService, firebaseDataService, PROTECTED_PATHS) {

    authService.firebaseAuthObject.onAuthStateChanged(function(authData) {
      if (!authData && pathIsProtected($location.path())) {
        authService.logout();
        $location.path('/login');
      };
    });

    function pathIsProtected(path) {
      return PROTECTED_PATHS.indexOf(path) !== -1;
    }
  }

})();

Спасибо за помощь !!


Ответы:


1

сначала вы должны ввести $state в свой контроллер и использовать $state.go('stateName')

$state.go('/app/overview') не будет работать

вы должны использовать $state.go('stateName')

angular
    .controller('AuthController', AuthController);

  AuthController.$inject = ['$scope', '$location','$state', 'authService'];

  function AuthController($scope, $location, $state,authService) {
    $scope.message = null;
    $scope.error = null;

    $scope.register = function() {
        return authService.register($scope.email, $scope.password)
        .then(function(userData) {
            $scope.message = "User created with uid: " + userData.uid;
        }).catch(function(error) {
            $scope.error = error;console.log(error);
        });
    };

    $scope.login = function() { 
        $scope.auth_error ="";
        return authService.login($scope.email, $scope.password)
        .then(function(authData) {
           $state.go('stateName');
        }).catch(function(error) {console.log(error);
            $scope.error = error;
            $scope.auth_error = "Username or Password is wrong.";
        });
    };

    $scope.logout = function() {console.clear();
        authService.logout();
        $location.path('/login');
    };

  }

})();
18.10.2016
  • Я ввел $state, а также попытался использовать $state.go('app.overview'); но оба способа не работают 18.10.2016
  • Вы пытались установить точку останова в инструментах разработки браузера и посмотреть, попала ли она в $state.go('stateName');? или у вас есть какая-либо ошибка на консоли? 18.10.2016
  • после того, как я попробовал это, я получил ошибку консоли, что-то вроде этого Ошибка: «invocables» должен быть объектом, даже я гуглил об этом, но не получил надлежащего ответа. 18.10.2016
  • я предлагаю вам поставить точку останова в начале вашего метода и возобновить с помощью f10, чтобы увидеть, где происходит ошибка 18.10.2016

  • 2

    Просто проверьте метод $state.go() вместо $location

    Сначала введите зависимость «$ state»

    AuthController.$inject = ['$scope', '$state', 'authService'];
    

    Проверьте файл routes.js.

    Ниже приведен пример кода.

     app.config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/profile");
        $stateProvider
            .state('login', {
                url: '/',
                templateUrl: 'login.html'
            })
            .state('app.overview', {
                url: '/overview',
                templateUrl: 'views/overview.html'
            })
    });
    

    Если все правильно, то вы можете использовать приведенный ниже код для перенаправления.

    $state.go('логин');

    Я использую событие $stateChangeSuccess, чтобы узнать изменения маршрута.

    app.run(['$rootScope', '$state', '$stateParams', '$cookies', '$timeout',
        function($rootScope, $state, $stateParams, $cookies, $timeout) {
              $rootScope.$state = $state;
              $rootScope.$stateParams = $stateParams;
    
    
              $rootScope.$on('$stateChangeSuccess', function(event, nextRoute, toState) {
                  console.log(nextRoute.name);
                  // $state.go('login');
              });
         }
    ])
    
    18.10.2016
  • Я ввел $state, а также попытался использовать $state.go('app.overview'); но оба метода не работают. 18.10.2016
  • проверьте загруженный config.route.js в основном вопросе. Надеюсь на это, это поможет. 18.10.2016
  • Проверьте правильность выполнения функции onAuthStateChanged. 18.10.2016
  • Я пробовал этот метод, но не уверен в этом. В console.log(authData); Я получаю данные о пользователе, такие как электронная почта, uid и т. д. Или мне следует использовать какой-либо другой метод? 18.10.2016
  • Проверьте мой обновленный ответ. Если это проблема с роутером, то я думаю, что это поможет вам. 18.10.2016
  • Давайте продолжим обсуждение в чате. 18.10.2016
  • Новые материалы

    Угловая структура архитектуры
    Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

    «Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
    Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

    Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
    В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

    Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
    React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

    Создайте API с помощью Python FastAPI
    Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

    Веселье с прокси-сервером JavaScript
    Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

    Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
    Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...