Question

TL; DR 我意识到这是非常冗长的，基本上我没有真正看到本地存储中的令牌是如何安全的，也不知道如何从后端PHP登录/注册服务（如基本网站）生成它们，或者即使这样做也是如此。

我是Angular 2的新手，我现在已经对它有了一个很好的感觉，并且可以解决它的工作原理，但我目前面临的是处理登录/会话数据以及用户的任何类型的数据特定的必须保存（例如，一个在线商店的购物项目）。

http://4dev.tech/2016/03/login-screen-and-authentication-with-angular2/本教程介绍了一个非常基本的迭代，但是使用虚拟数据我真的无法在我自己的个人数据库集成和通信中连接点

我已经在我的原始HTML-PHP网站上创建了一个超级基本登录设置，它只是用用户名和加密密码查询MySQL数据库，并返回一个用户ID作为结果。

然后我会调用一个全局PHP文件来告诉当前页面已登录，如果是，则显示x或y结果并从登录用户中获取信息，如用户名或电子邮件。

我想要了解的是如何在Angular 2系统中实现这一点，我是否可以使用相同的后端注册/登录PHP文件，我以前的非角度站点中调用的旧javascript文件，并设置一个唯一的令牌那;然后，我将在本地存储登录用户的所有信息？

就我的安全而言，这感觉很奇怪，就像你可以操纵javascript客户端告诉它有一个有效的令牌然后就像你登录一样。并且可以在本地存储多少信息，我是否使用各种ID来“检测”数据库以检索信息，还是将其存储在令牌中。

如果有可能有人提供链接或超级基本解释/使用后端PHP和Angular从MySQL数据库登录/注销的示例？如果不使用虚拟数据会更容易，我的个人服务器允许跨源引用，所以我使用它来进行当前的连接和数据检索测试（我有后端PHP文件只打印从我的数据库中恢复的json数据，我可以轻松显示在我的页面上）

我目前使用自己的个人服务器和Angular CLI中的Angular 2项目的示例如下所示;

component.ts

import {Component, OnDestroy, OnInit} from '@angular/core';
import 'rxjs/add/operator/retry';
import {GetDataService} from "../../../services/get-data.service";
import { AnimateAnimation} from "../../../animation/animate.animation";
import {Subscription} from "rxjs/Subscription";

@Component({
    selector: 'app-projects',
    templateUrl: './projects.component.html',
    styleUrls: ['./projects.component.scss'],
    animations: [
        AnimateAnimation
    ]
})

export class ProjectsComponent implements OnInit, OnDestroy {
    pageHeader:any = "ONLINE PORTFOLIO";
    showFooter:boolean = true;
    dataURL:string = 'https://callum.tech/php/json.php?table=projects';
    subscription:Subscription;
    data;

    constructor(private getData:GetDataService) {
        this.subscription = this.getData.getJSONData(this.dataURL).subscribe(
            data => this.data = data);
    }

    openSite(site:string) : void {
        window.open(site, "_blank");
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

    ngOnInit() {

    }
}

显示数据就是这样; 的 component.html

<div [@fadeInOut] *ngIf="data;else other_content">
    <div class="row">
      <div *ngFor="let project of data" class="col-md-6">
        <div>
          <mat-card class="mat-elevation-z4">
            <mat-card-header>
              <div mat-card-avatar class="example-header-image"></div>
              <mat-card-title>{{project.title}}</mat-card-title>
              <mat-card-subtitle>{{project.category}}</mat-card-subtitle>
              <div class="grow-empty"></div>
              <mat-card-content *ngIf="project.source">
                <button mat-raised-button (click)="openSite(project.source)">SOURCE</button>
              </mat-card-content>
            </mat-card-header>
            <img mat-card-image src="{{project.image}}" alt="{{project.title}}">
            <mat-card-content>
              <p>
                {{project.detail  | slice:0:200}}...
              </p><br>
              <mat-chip-list>
                <mat-chip color="accent" selected="true">{{project.tags}}</mat-chip>
              </mat-chip-list>
              </mat-card-content>
            <mat-card-actions>
              <button mat-raised-button>Information</button>
            </mat-card-actions>
          </mat-card>
        </div>

仅举例说明我如何使用我的实时数据在我的项目中进行测试以获得个人清晰度

与PHP

0 个答案: