当我的angularjs应用程序启动时，有没有办法防止加载初始状态

Is there a way to prevent the initial state from loading when my angularjs app starts up?

本文关键字：初始状态 加载 有没有 angularjs 我的 应用程序 启动      更新时间：2023-09-26

背景

在加载第一个状态之前，我的应用程序需要向服务器发出请求，以验证用户是否有经过身份验证的会话。根据url的不同，用户可能需要重定向到登录页面。

即，如果初始url是myapp.com/#/profile，并且用户没有预先存在的已验证会话，则他们将被重定向到myapp.com/#/login


问题

我有适当的逻辑来处理这种情况，但在向服务器发出会话数据请求后，在它完成之前，会立即触发初始状态更改，并且在服务器响应之前加载和显示页面


可能的解决方案

1( 我使用django作为后端，因此可以从应用程序中删除初始服务器请求，并将数据直接传递给django模板中的应用程序。通过

  • 主控制器的初始化-尽管我读到这是一个坏主意，因为它不是的预期用途

  • 或者在django模板中的脚本标签中——我不喜欢这样做，因为我宁愿把我所有的应用程序逻辑都单独放在js文件中

2( 监听初始的$stateChangeStart，取消它，然后在服务器请求完成后调用$state.reload((


问题

在我看来，在初始状态更改发生之前满足某些标准是一个相当常见的要求，所以我想知道我是否在文档中遗漏了一些内容，并且已经有了一种内置的方法来处理这种情况？

或者，是否有一种方法可以停用$urlRouterProvider/$stateProvider，以防止发生初始状态更改？

假设您的所有身份验证逻辑都已经在类似AuthService的东西中，难道不可能执行以下操作吗？

// 'AuthService' injected earlier
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
    if (!AuthService.isAuthenticated()) {
        // prevent navigation. don't go anywhere;
        // navigation will occur inside AuthService
        event.preventDefault();
        AuthService.setNextState(toState.name);
        AuthService.authenticateWithServer();
    }
    // proceed normally if user is already authenticated
});

然后，您的AuthService:

app.service('AuthService', function($rootScope, $http, $state) {
    var next;
    this.setNextState = function(nextState) { next = nextState; };
    this.isAuthenticated = function() { ... };
    this.authenticateWithServer = function() {
        $http.post('/authen', { ... }).success(function(user){
            // house-keeping
            $rootScope.user = user;
            // navigate by state name
            $state.go(next);
        }).error(function(error) {
            // navigate to login screen
            $state.go('login');
        });
    };
});

这样，您的状态定义是干净的，并且身份验证逻辑被隔离在一个地方。您还可以确保，在您获得所需的所有信息之前，导航永远不会发生。

相关文章：