Question

在我的Aurelia视图模型中，我试图在canActivate()中检查一些前提条件，并根据它决定是否导航到不同的视图。

export class ThisView{

    canActivate() {        
        const self = this;
        const promise = self.services.get(url)
            .then((items: any) => {
                if (items) {
                    self.items= items;
                    if (self.items.length === 1) {
                        this.router.navigate("some/other/view");
                        //return false; 
                    }
                    //return true;
                } else {
                    self.logger.error("No item found");
                    //return false;
                }                
            });
        return promise;
    }
}

现在，即使我找到只有一个项目，我导航到some/other/view，ThisView的视图仍然被激活（即可以在浏览器中看到）。

有没有办法，为了避免这种情况？我为此尝试了几件事。

从true返回false或promise以接受或拒绝激活此视图。但由于此视图是我的应用程序的一种登录页面，如果被拒绝（返回false），它会尝试恢复以前不可用的位置，并抛出错误。此特定案例的申请也不希望恢复以前的位置。
另一个想法是做一个类似管道步骤的事情，我们可以做next.cancel(new Redirect("some/other/view"))之类的事情，在那里我们可以指示用新的取消当前的导航指令。但我不确定如何从视图模型中做同样的事情。

请建议。

解决方法：我终于在if.bind的视图中使用了ThisView的简单技巧。但是，如果我们能够以某种方式取消当前的指令（从页面生命周期）新的指令，它可能会更有趣。

Answer 1

而不是this.router.navigate（“some / other / view”）你不能导入重定向并在那里添加重定向，即

import {Redirect} from 'aurelia-router';

export class ThisView{

canActivate() {        
    const self = this;
    var items = self.services.get(url);
    if(items){
        self.items= items;
        if (self.items.length === 1) {
           return new Redirect("some/other/view");
        }
        return true;
    } 
    else {
        self.logger.error("No item found");
        return new Redirect("not-found-view");
    }                
}

}

我已经制作了一个基本的GistRun，展示了它是如何工作的 - 我没有使用过承诺，但我相信这个概念是一样的。

https://gist.run/?id=52301f1b2898691ff4d54f320f61f6c6

Answer 2

您可以使用activate()事件来处理路由器导航。抛出错误以停止导航或转到/重定向到另一个位置。例如：

import {Router} from 'aurelia-router';

export class SampleModel {
  static inject() { return [Router] };

  constructor(router) {
    this.router = router;
  }

  activate(){
    if(this.somedata === null){
      // stop navigation or goto start location
      if(this.router.history.previousLocation){
        // stop from navigation
        throw new Error('Wrong data');
      }else{
        // return to start page
        this.router.navigate('start');
      }
    }
  }
}

Answer 3

您也可以像完成授权步骤一样在路由器管道中注入一些中间件。

然后，您将在特定步骤中呼叫您的服务，并根据结果路由到不同的视图。

可以在此处找到有关如何将步骤添加到路由器管道的一些代码段： Aurelia: During a Router's Pipeline Step, how do I bind a variable to that router?

Answer 4

我想出了另一种在canActive（）中处理导航的方法

LongText

从Aurelia视图模型中的canActivate导航

4 个答案: