2

如果用户未登录，我想确保用户在继续访问他/她尝试访问的任何组件之前正确登录。发送他们登录。

我的想法是$routerOnActivate在根路由器中进行检查。对我来说，这可以解决任何子路线的问题。

但是，如果我只是尝试记录一些东西，似乎什么也没有发生。例子：

angular
    .module('app')
    .config(function($locationProvider) {
        $locationProvider.html5Mode(true);
    })
    .value('$routerRootComponent', 'app')
    .component('app', {
          templateUrl:'landing.html',
          controller: MainController,
          $routeConfig: [
                { path: '/', name: 'Dashboard', component: 'dashboard', useAsDefault: true },
                { path: '/media', name: 'Media', component: 'media'}
                ...
          ]
    });


function MainController(){
    this.$routerOnActivate = function(next, previous){
        console.log('activated', next, previous);
    };
}

this.$routerOnActivate如果我将它放在 routeConfig 中指定的任何组件中，则相同的代码可以工作。但是显然我不想在每个组件中进行相同的检查，而是在全局范围内解决一次。

1.5的方法是什么？

4

2 回答 2

2

在加载页面时不要执行检查，而是使用以下命令：

Angular 有一个特殊的组件生命周期钩子来处理这些名为$canActivate- 检查它是否应该尝试激活它的边缘情况。您可以与身份验证/授权服务交谈，以验证对于给定用户的状态，他们是否允许访问您的组件。

这样，您的组件将足够智能，可以封装激活自身所需的任何检查。

此外，您可以注入任何服务$http或您的自定义服务来与您的服务器通信。在下面的代码片段中，我模拟了这个调用$timeout，它只返回 true，如果返回 false，你的组件将不会激活。

angular.module('app').component('someComponent', {
    template: 'this is an inline component template',
    $canActivate: function ($timeout) {
        return $timeout(function(){
            return true;
        }, 2000);
    }
});

使用另一个名为$routerOnActivate读取下一个和上一个路由的钩子。如果您对路由的参数感兴趣，请使用next.params它是一个始终具有传递给该路由的参数的对象。例如next.params.id，其中 id 是传递给请求路由的参数。

使用$canActivateTypeScript：

我已经写了一篇关于如何在 TypeScript 中使用编写 AngularJS 组件的文章，并有一些草稿来使用我今天将发布的路由器生命周期钩子。到那时，下面是使用 TypeScript 使用一些钩子的代码：

class ReviewDetailsComponent implements ng.IComponentOptions {
        templateUrl = 'app/components/review-details.component.html';

        // function member for this hook doesn't work!!
        // so either use lambda expression or function directly.
        $canActivate = $timeout => $timeout(() => true, 3000);

        controllerAs = 'model';
        controller = ['$http', ReviewDetailsController];
    }

angular.module('app').component('reviewDetails', new ReviewDetailsComponent());

上面的打字稿代码与上面使用$canActivate.

不幸的是，当 this 被定义为类中的函数成员时它不起作用，$canActivate()并且生成的 javascript 是使用原型定义的这个成员ReviewDetailsComponent.prototype.$canActivate。

但是在直接使用 lambda 表达式语法或函数编写时效果很好。如果您使用类来定义组件，那么在这种情况下最好选择 lambda 表达式。

使用$routerOnActivateTypeScript

在这种情况下，链接控制器还使用另一个名为的生命周期钩子$routerOnActivate，如果将其定义为函数成员，则效果很好：

interface IReviewDetailsController {
    id: number;
    $routerOnActivate(next, previous);
}

class ReviewDetailsController implements IReviewDetailsController {

    id: number;

    constructor(private $http: angular.IHttpService) { }

    $routerOnActivate(next, previous) {
        this.id = next.params.id;

        // talk to cache or server to get item by id
        // & show that on UI
    }
}
于 2016-05-15T14:28:50.773 回答
1

根据要求粘贴我的评论

对页面上的加载进行检查怎么​​样？这将在 angular.run 中完美运行。

如果你想处理会话过期，你可以为所有请求添加一个拦截器并观察 401 响应。

于 2016-04-11T11:42:24.773 回答