如何在Aurelia的身份驗證後返回查看

Question

我有一個可以通過電子郵件的直接鏈接訪問的視圖。

Ex。 http://myServer:7747/#/pics/ClientId/YYYY-MM-DD

所以這個設置使用路線：

{ route: ['/pics', '/pics/:clientId/:sessionDate', 'pics'], 
    name: 'pics', moduleId: './views/pics', nav: false, title: 'Pictures', 
    auth: true, activationStrategy: activationStrategy.invokeLifecycle 
}, 

因此，如果客戶點擊此鏈接，並沒有登錄，我想要的視圖重定向到登錄界面（我用aurelia-authentication插件），然後當它成功時，我希望它使用相同的urlParams返回到此頁面。

我有重定向到登錄頁面工作，但回到這個視圖證明是困難的。如果我只是嘗試使用history.back()，問題是身份驗證插件已將另一個navigationInstruction (loginRedirect)推到歷史記錄上，然後我才能執行任何操作。如果我只是嘗試硬編碼「返回兩次」導航，那麼當用戶僅嘗試從主頁面重新登錄並且沒有歷史記錄時，就會遇到問題。

看起來像這樣應該比它容易，我做錯了什麼？

Answer 1

我得到這個由我自己更換插件的authenticateStep工作：

import { inject } from 'aurelia-dependency-injection'; 
import { Redirect } from 'aurelia-router'; 
import { AuthService } from "aurelia-authentication"; 
import { StateStore } from "./StateStore"; 

@inject(AuthService, StateStore) 
export class SaveNavStep { 
    authService: AuthService; 
    commonState: StateStore; 

    constructor(authService: AuthService, commonState: StateStore) { 
     this.authService = authService; 
     this.commonState = commonState; 
    } 

    run(routingContext, next) { 
     const isLoggedIn = this.authService.authenticated; 
     const loginRoute = this.authService.config.loginRoute; 

     if (routingContext.getAllInstructions().some(route => route.config.auth === true)) { 
      if (!isLoggedIn) { 
       this.commonState.postLoginNavInstr = routingContext; 
       return next.cancel(new Redirect(loginRoute)); 
      } 
     } else if (isLoggedIn && routingContext.getAllInstructions().some(route => route.fragment === loginRoute)) { 
      return next.cancel(new Redirect(this.authService.config.loginRedirect)); 
     } 

     return next(); 
    } 
} 

礦山和股市一個之間的唯一區別是，我注入一個「StateStore '對象，我保存需要驗證的NavigationInstruction。

然後在我的登錄視圖模型，我這注相同StateStore（單）對象，這樣做登錄：

login() { 
    var redirectUri = '#/defaultRedirectUri'; 

    if (this.commonState.postLoginNavInstr) { 
     redirectUri = this.routing.router.generate(this.commonState.postLoginNavInstr.config.name, 
          this.commonState.postLoginNavInstr.params, 
          { replace: true }); 
    } 
    var credentials = { 
     username: this.userName, 
     password: this.password, 
     grant_type: "password" 
    }; 
    this.routing.auth.login(credentials, 
     { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }, 
     redirectUri 
    ).catch(e => { 
     this.dialogService.open({ 
      viewModel: InfoDialog, 
      model: ExceptionHelpers.exceptionToString(e) 
     }); 
    }); 
}; 

希望這可以幫助別人！

Answer 2

我還沒有使用aurelia-authentication插件，但是我可以幫助您使用這個基本技巧，這使得這非常簡單。在您的main.js文件中，將您的應用的根設置爲「登錄」組件。在登錄組件中，當用戶成功通過身份驗證時，將您的應用的根設置爲具有路由器視圖的「shell」組件（或您選擇的任何組件），並在其視圖模型中配置路由器。一旦發生這種情況，路由器會根據url將用戶轉到適當的組件。如果用戶註銷，只需將應用根設置回「登錄」組件即可。

下面是一些粗略的代碼，試圖傳達這個想法。我假設你使用的是SpoonX插件，但這不是必須的。只要您在用戶驗證時重置應用程序的根目錄，它就會起作用。

在main.js

..... 
aurelia.start().then(() => aurelia.setRoot('login')); 
..... 

在login.js

import {AuthService} from 'aurelia-authentication'; 
import {Aurelia, inject} from 'aurelia-framework'; 

@inject(AuthService, Aurelia) 
export class Login { 
    constructor(authService, aurelia) { 
     this.authService = authService; 
     this.aurelia = aurelia; 
    } 

    login(credentialsObject) { 
     return this.authService.login(credentialsObject) 
      .then(() => { 
       this.authenticated = this.authService.authenticated; 

       if (this.authenticated) { 
        this.aurelia.setRoot('shell'); 
       } 
      }); 
    } 

    ..... 
} 

在shell.html

..... 
<router-view></router-view> 
..... 

在shell.js

..... 
configureRouter(config, router) { 
    this.router = router; 
    config.map(YOUR ROUTES HERE); 
} 
.....