登录后如何重定向

Question

I am trying to redirect a user to different page after user is authenticated. I am using jwt authentication and I tried with $location , $window for redirection but its throwing error $state.go is not a function . I am new to angular and I am guessing there should be way to redirect may using a service in angular but I am still new to factories and service.

I have my state provider like this in state.js file:

myApp.config(function ($stateProvider, $urlRouterProvider) {

    // default route
    $urlRouterProvider.otherwise("/Home");
    var header = {
        templateUrl: 'commonViews/Header.html',
        controller: function ($scope) {
        }

    };
    var footer = {
        templateUrl: 'commonViews/Footer.html',
        controller: function ($scope) {
        }
    };
    // ui router states
$stateProvider
    .state('Home', {
        url: "/Home",
        views: {
            header: header,
            content: {
                templateUrl: 'views/HomePage.html',
                controller: function ($scope) {
                }
            },
            footer: footer
        }
    })
    .state('LoggedIn', {
        url: "/LoggedIn",
        views: {
            'header': header,
            'content': {
                templateUrl: 'views/LoggedIn.html',
                controller: function () {
                }
            },
            'footer': footer
        }
    });
});

and loginController.js :

myApp.controller('loginController', ['$scope', '$http', 'jwtHelper', '$localStorage', '$state', function ($scope, $http, jwtHelper, $localStorage, $sessionStorage, $state)
{
$scope.email = "";
$scope.password = "";
$scope.token = "";

$scope.loginForm = function () {

    var data = {email: $scope.email, password: $scope.password};
    var url = 'rs/loginResource/login';
    $http.post(url, data).then(function (response)
    {
        $localStorage.token = response.data.token;
        console.log("Encoded Token in localstorage is:" + $localStorage.token);

        if ($localStorage.token) {
         // $location.url("/LoggedIn");
            $state.go('/LoggedIn');
        }

    }, function (error)
    {
        console.log("error", error);
    });
};
}]);

further I have to perform refresh token based on expiration time etc, so is it better to have separate the functions like using a service to do the signup and signin?

Answer 1

The problem is the definition of your controller and the way you're handling your injections. And no, referring to your own answer to your question, the problem is not the "order" of the injections. It's a bit worse.

myApp.controller('loginController', ['$scope', '$http', 'jwtHelper', '$localStorage', '$state', function ($scope, $http, jwtHelper, $localStorage, $sessionStorage, $state)

in this code you're mapping '$scope' to a $scope variable, '$http' to $http , 'jwtHelper' to jwtHelper , '$localStorage' to $localStorage and '$state' to $sessionStorage , and you're not mapping anything to $state . So obviously you get an error when you try to call a method on an undefined $state variable. So in short, you're injecting 5 dependencies and you're assigning 6 variables to your dependencies, which in turn results in things not doing what they're supposed to do.

Answer 2

您可以使用Angular $窗口：

$window.location.href = '/index.html';

Answer 3

$state. go $state. go accepts the view name , not the URL . Replace '/LoggedIn' with Logged and you should be good.

Answer 4

You need to add $window as a dependency to your controller if you are using $window,

myApp.controller('loginController', ['$scope', '$http', 'jwtHelper', '$localStorage', '$state','$window', function ($scope, $http, jwtHelper, $localStorage, $sessionStorage, $state,$window)
{
$window.location.href = '/index.html';
}

otherwise change the route like this, here also you need to inject $state,

  myApp.controller('loginController', ['$scope', '$http', 'jwtHelper', '$localStorage', '$state','$window','$state', function ($scope, $http, jwtHelper, $localStorage, $sessionStorage, $state,$window,$state)
{
      $state.go('LoggedIn');
}

Answer 5

Use $state.go instead of $window and location .
Add $state injector on controller
write code $state.go('LoggedIn');
Instead $state.go('/LoggedIn');

Write state name('LoggedIn') instead of url('/LoggedIn').

Hopefully this will work in your case.