在主(Aurelia）之前登录页面

Login page before main (Aurelia)

本文关键字：登录 Aurelia 在主      更新时间：2023-09-26

我希望当用户来检查他之前是否登录 - 如果没有 ->重定向到登录页面 ->如果他的电子邮件和密码没问题 ->重定向回欢迎页面。

我有什么问题 ->服务在登录类中正常工作，但欢迎类完全忽略服务中的任何更改。

法典

用户.js

export class Users {
users = [
    { name: 'Lucian', email: 'lucian1992@zalando.de', password: 'lucian' },
    { name: 'Corki', email: 'corki2010@supplier.de', password: 'corki' },
    { name: 'Vayne', email: 'vaynii@zalando.de', password: 'vayne' }];
securedUser = {};
error = {};
usedOnce = 0;
check(checkUser) {
    this.usedOnce = 1;
    this.securedUser = this.users.filter((user) => user.email === checkUser.email
                                                && user.password ===   checkUser.password)[0];
    if (typeof this.securedUser === 'undefined'){
        this.error = { message: "No such kind of user or wrong password" };
    }
 }
}

登录.js

import {inject} from 'aurelia-framework';
import {Users} from 'users-list';
import {Router} from 'aurelia-router';
@inject(Users, Router)
export class Login {
    constructor(userData, router) {
        this.router = router;
        this.users = userData.users;
        this.check = userData.check;
        this.securedUser = userData.securedUser;  // Changed after check function
        this.userError = userData.error;
    }
    checkUser = {};
    login() {
        this.check(this.checkUser);
        if (typeof this.userError === 'undefined') {
            alert(this.error.message);
        } else {
            this.router.navigate("")
        }
    }
}

欢迎.js

import {inject} from 'aurelia-framework';
import {Users} from 'users-list';
import {Redirect} from 'aurelia-router';
@inject(Users)
export class Overview {
  constructor(userData) {
    this.usedOnce  = userData.usedOnce;
    this.securedUser = userData.securedUser;  // This object changed in login.js, but totally ignores in this class
  }
  heading = 'Welcome to the Article Manager Prototype!';
  canActivate() {
    if (this.securedUser) {
      return new Redirect('/login')
    }
  }
}

因此，安全用户在登录.js中更改了技术问题，但在欢迎.js中完全忽略了。这是因为可以激活方法吗？因为我也使用 activate（） - 同样的问题。

将不胜感激任何帮助了解问题。

官方文档中有针对您的问题的解决方案：

import {Redirect} from 'aurelia-router';
export class App {
  configureRouter(config) {
    config.title = 'Aurelia';
    config.addPipelineStep('authorize', AuthorizeStep);
    config.map([
      { route: ['welcome'],    name: 'welcome',       moduleId: 'welcome',      nav: true, title:'Welcome' },
      { route: 'flickr',       name: 'flickr',        moduleId: 'flickr',       nav: true, auth: true },
      { route: 'child-router', name: 'childRouter',   moduleId: 'child-router', nav: true, title:'Child Router' },
      { route: '', redirect: 'welcome' }
    ]);
  }
}
class AuthorizeStep {
  run(navigationInstruction, next) {
    if (navigationInstruction.getAllInstructions().some(i => i.config.auth)) {
      var isLoggedIn = /* insert magic here */false;
      if (!isLoggedIn) {
        return next.cancel(new Redirect('login'));
      }
    }
    return next();
  }
}

请注意，与常规路由器配置逻辑相比，添加了config.addPipelineStep('authorize', AuthorizeStep);。

资料来源：http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.2.2/doc/article/cheat-sheet/7（您需要向下滚动到"自定义导航管道"部分）

我尝试了一个自己的例子，也许我发现了你的问题。

您正在检查您的securedUser是否为空。如果它不为空，您将编辑为login 

canActivate() {
    if (this.securedUser) { // change to !this.securedUser
        return new Redirect('/login')
    }
}

并且您将 securedUser 初始设置为空对象：

securedUser = {};

因此，即使您的 if 条件错误，您的第一个重定向也在工作。不要设置初始值，设置未定义或更改if条件并检查sercuredUser属性。

您的解决方案可能有效，但是如果您有 50 条必须授权的路由，则必须使用 canActivate 钩子 50 次！对于授权工作流来说，这不是一个优雅的解决方案。

这是一个更优雅的解决方案：

不要使用登录的"路由"，而是创建一个隔离的根组件，然后更新您的主.js文件：

//for example, imagine that your root component is located at src/app/app.js
//and your login component at src/login/login.js
//app.isLoggedIn() checks if the credentials/tokens are OK
aurelia.start().then(a => {
  let rootComponent = '' app.isLoggedIn() ? 'app/app' : 'login/login';
  a.setRoot(rootComponent, document.body);
});

现在，在您的登录/登录.js根组件中，您必须配置路由器：

configureRouter(config, router) {
  config.title = 'YourTitle';
  config.map([
    { route: '', name: 'user-password', moduleId: './user-password', title: 'Sign In' }, //route for "username/password" screen
    { route: 'forgot-password', name: 'forgot-pwd', moduleId: './forgot-pwd', title: 'Forgot Password?' } //example of "forgot password" screen
  ]);
  config.mapUnknownRoutes(instruction => {
    //if an unknown route has been found,
    //a route from the app component, 'users/add' for example
    //redirect to sign-in component
    return './user-password';
  });
  this.router = router;
}

创建适当的方法来对用户进行身份验证，然后将其重定向到app/app组件：

//import and inject { Aurelia } from 'aurelia-framework';
this.aurelia.setRoot('app/app');

现在，如果未经授权的用户访问"用户/添加"，它将被重定向到登录页面。如果登录成功，将显示"用户/添加"页面。

希望这有帮助！

相关文章：