首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angularjs ui-路由器。如何重定向到登录页面

Angularjs ui-路由器。如何重定向到登录页面
EN

Stack Overflow用户
提问于 2014-11-30 18:18:30
回答 3查看 84.8K关注 0票数 55

我有4种状态:dashboarddahboard.maindashboard.minorlogin。仪表板是抽象的,它是.minor和.main状态的父状态。下面是我的代码:

代码语言:javascript
复制
.state('dashboard', {
        url: "/dashboard",
        abstract: true,
        templateUrl: "views/dashboard.html",
        resolve: {
            auth: function ($q, authenticationSvc) {
                var userInfo = authenticationSvc.getUserInfo();
                if (userInfo) {
                    return $q.when(userInfo);
                } else {
                    return $q.reject({ authenticated: false });
                }
            }
        },
        controller: "DashboardCtrl",
        data: { pageTitle: 'Example view' }
    })
    .state('dashboard.main', {
        url: "",
        templateUrl: "views/main.html",
        controller: "DashboardCtrl",
        data: { pageTitle: 'Main view' }
    })

正如您在仪表板状态中看到的,我有resolve选项。通过这个,我想将用户重定向到登录页面,如果他没有授权。因此,我使用特殊的authenticationSvc服务:

代码语言:javascript
复制
.factory("authenticationSvc", ["$http", "$q", "$window", function ($http, $q, $window) {
    var userInfo;

    function login(email, password) {
        var deferred = $q.defer();

        $http.post("/api/login", { email: email, password: password })
            .then(function (result) {
                if(result.data.error == 0) {
                    userInfo = {
                        accessToken: result.data.accessToken
                    };
                    $window.sessionStorage["userInfo"] = JSON.stringify(userInfo);
                    deferred.resolve(userInfo);
                }
                else {
                    deferred.reject(error);
                }
            }, function (error) {
                deferred.reject(error);
            });

        return deferred.promise;
    }
    function getUserInfo() {
        return userInfo;
    }
    return {
        login: login,
        logout: logout,
        getUserInfo: getUserInfo
    };
}]);

我检查配置中的AUTH值:

代码语言:javascript
复制
.run(function($rootScope, $location, $state) {
    $rootScope.$state = $state;
    $rootScope.$on("routeChangeSuccess", function(userInfo) {
        consol.log(userInfo);
    });
    $rootScope.$on("routeChangeError", function(event, current, previous, eventObj) {
        if(eventObj.authenticated === false) {
            $state.go('login');
        }
    });
});

但不幸的是,当我转到我的网站根目录或仪表板状态时,我得到一个空页面。这段代码有什么问题?谢谢!

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-12-01 00:12:38

重点是,如果不需要===,如果已经重定向到预期状态,则不要重定向。a working plunker也有类似的解决方案

代码语言:javascript
复制
.run(function($rootScope, $location, $state, authenticationSvc) {


    $rootScope.$on( '$stateChangeStart', function(e, toState  , toParams
                                                   , fromState, fromParams) {

        var isLogin = toState.name === "login";
        if(isLogin){
           return; // no need to redirect 
        }

        // now, redirect only not authenticated

        var userInfo = authenticationSvc.getUserInfo();

        if(userInfo.authenticated === false) {
            e.preventDefault(); // stop current execution
            $state.go('login'); // go to login
        }
    });
});

有关类似的解释,请查看以下内容:

票数 77
EN

Stack Overflow用户

发布于 2014-11-30 21:30:46

由于您使用的是UI-Router模块,因此您应该使用$stateChangeStart$stateChangeSuccess events。

有关更多信息,请查看此链接:https://github.com/angular-ui/ui-router/issues/17

此外,在控制台中的consol.log(userInfo)中也有一个拼写错误。

在chrome-dev-tools中检查控制台。如果缺少其他东西,它会给出答案。

票数 4
EN

Stack Overflow用户

发布于 2018-03-09 09:29:27

请注意,实际上$stateChangeSuccess事件已被弃用,并且在angular-ui-route包中不再可用。现在,此行为由transition hooks处理。您可以使用$transitions.onStart实现您的目的,如下所示:

代码语言:javascript
复制
run.$inject = ['$transitions', 'authenticationSvc'];
function run($transitions, authenticationSvc) {

  $transitions.onStart({}, function (trans) {
    var userInfo = authenticationSvc.getUserInfo();

    var $state = trans.router.stateService;

    if(userInfo.authenticated === false) {
        $state.go('login'); // go to login
    }
  });
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/27212182

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档