如何在Aurelia中进行身份验证后返回查看

时间:2017-03-04 03:19:20

标签: aurelia aurelia-auth

我有一个可以通过电子邮件直接链接访问的视图。

实施例。 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)推送到历史记录中。如果我只是尝试硬编码“返回两次”导航,当用户只是尝试从主页面登录并且没有历史记录时会遇到问题。

这样看起来应该比它更容易,我做错了什么?

2 个答案:

答案 0 :(得分:0)

我没有使用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);
}
.....

答案 1 :(得分:0)

我通过将插件的authenticateStep替换为我自己的:

来实现此目的
PostsController

我和库存之间的唯一区别是我注入一个'StateStore'对象,我保存需要验证的NavigationInstruction。

然后在我的登录viewModel中,我注入了相同的StateStore(单例)对象并执行类似这样的操作来登录:

    public function edit($id) 
    {
        $post = Post::findOrFail($id);  
        return view('dashboard.edit', compact('post'));
    }

    public function update($id, PostRequest $request) 
    {
        $post = Post::findOrFail($id);
        $post->update($request->all());
        return redirect ('dashboard');
    }

希望这有助于某人!