Question

我建立一个web应用与角度和网站所有人无障碍，但我创建了一个组件adminOverview与溃败给它/admin与我的网站上没有链接到这条路线，我想用1个用户创建某种身份验证只能看到这个组件，它将填充我的firebase应用程序中的数据，但我不知道如何从这里继续前进。

我可以使用哪些工具框架，我只需要1次登录，所以也不需要复杂？
如何定义某个路由仅适用于经过身份验证的用户？
我从我的firebase数据库中获取并设置了非认证部分，我是否需要在我的设置中更改某些内容？

Answer 1

对于工具..，您可以使用一些模板，如CoreUI enter link description here或mdbootstrap。将有一个登录页面，您必须使用本地存储并在登录后转到主页面。我已经为你举了一个例子。我希望这有帮助!!

＆＃13;

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import {MyDataService} from '../my-data.service';

@Component({
templateUrl: 'login.component.html',
 })

export class LoginComponent implements OnInit {

constructor(private router: Router, private user:MyDataService){}

ngOnInit(){
}
  loginUser(e) {
   e.preventDefault();
   console.log(e);
   var username = e.target.elements[0].value;
   var password = e.target.elements[1].value;

   if(username == 'root' && password == 'socrates'){
   this.user.setUserLoggedIn();
   this.router.navigate(['dashboard']);
}
}
}

＆＃13;

<div class="app flex-row align-items-center">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card-group mb-0">
          <div class="card p-4">
            <div class="card-block">
              <h1>Login</h1>
              <p class="text-muted">Sign In to your account</p>
              <form (submit)="loginUser($event)">
              <div class="input-group mb-3">
                <span class="input-group-addon"><i class="icon-user"></i></span>
                <input type="text" class="form-control" placeholder="Username">
              </div>
              <div class="input-group mb-4">
                <span class="input-group-addon"><i class="icon-lock"></i></span>
                <input type="password" class="form-control" placeholder="Password">
              </div>
              <div class="row">
                <div class="col-6">
                  <button type="submit" class="btn btn-primary px-4">Login</button>
                </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

＆＃13;

1个用户的Angular 5身份验证

1 个答案: