Question

我在角度应用程序中设置了一个类似于http://demos.angularcode.com/angularcode-authentication-app/#/login

的简单登录系统

我现在面临的问题是，如果我在未登录时尝试访问某个页面，它会在重定向到登录之前首先显示受限制的页面。

如果您尝试直接转到页面http://demos.angularcode.com/angularcode-authentication-app/#/dashboard

，则可以看到此行为

我最早可以进行身份验证检查是在我的模块声明中：

angular.module('myApp', [])
.run(function() {
   //check auth + redirect
}

在重定向到登录之前，有没有办法不先显示受限制的页面？

修改

我使用$ urlRouterProvider和$ stateProvider来管理路线。

例如主页：

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

    $urlRouterProvider.otherwise("/home");
    $stateProvider
        .state('home', {
            url : '/home',
            templateUrl : 'views/home.html'
        })

Answer 1

你可以抓住＆＃39;状态更改开始事件，并检查用户是否可能被重定向到请求的页面：

app.run(function ($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
        // run logic to check if login is required
        if (requireLogin && !userIsLoggedIn) {
            event.preventDefault(); // stop redirecting
            $state.go("login");
        } else {
            // allowed to go to requested state
            // .. do nothing, user will go to state
        }
    });

});

Answer 2

angular.module('myApp', [])
.run(function() {
  //Firstly Display Restricted page then after some time show the login page
}

使用此系统$timeout。显示您的受限页面，然后在您想要的任何时间间隔之后从同一函数调用登录页面。

请查看此处的文档以了解相关信息。 https://docs.angularjs.org/api/ng/service/ $超时

检查此示例 - Pic会在一段时间后更改

http://jsfiddle.net/thomporter/vqVrX/

您也可以查看其他jsfiddles以了解其概念。

Answer 3

将变量绑定到rootScope以检查用户是否已登录，或者不是$ rootScope.isLoggedIn，并默认将其设置为false。

然后添加

ng-show="isLoggedIn"

属于home.html容器。

我认为它会解决你的问题。

在显示页面之前运行验证代码

修改

3 个答案: