ang2サポートチケットシステムのメンバーログイン

Question

私はangular2を学んでいます。ハードワークとコミュニティの助けを借りて、私は最初の角度2アプリを完成させることができました。シンプルなサポートチケットシステムです。

デザインに大きな間違いがありました。ログインしたユーザーだけがサポートチケットを作成できるという事実を考慮せずにアプリ全体を作りました。

私の状況を考慮してこれを達成するための最良の方法は何ですか？

オプション1： 私はangular2ログインフォームを構築し、例のチュートリアルはここにある： http://4dev.tech/2016/03/login-screen-and-authentication-with-angular2/ 、ここ http://jasonwatmore.com/post/2016/09/29/angular-2-user-registration-and-login-example-tutorial

私はこの道を行けば、私は、ユーザー名でログインを保存する場所を知りませんログインが成功した後、プロジェクト全体のすべてのコンポーネントに利用できるようになります（ログイン資格はjavascriptになり、json経由でサーバーに渡されるため）。

オプション2： 2番目のオプションは、私は、ドメインのルートに常駐し、その後、ログインが成功した後、私は中/チケット/フォルダに存在しますangular2アプリにリダイレクトされますPHPと静的なHTMLログインフォームを構築することです。

ここで挑戦するのは、私はphpからangular2アプリへのログインユーザー名を渡すでしょうか？ angular2のindex.htmlは静的ファイルです。

私は関係なく、私が

を選択した方向、私は最初のオプションを言う感謝

Answer 1

を助けなかっください立ち往生しています。あなたのログイン情報を一時的に "キャッシュ"するためにlocalStorageを使用することはかなり標準的です。すべてのコンポーネントがlocalStorageにアクセスできるはずです。ユーザーデータを必要とするコンポーネントにデータを格納するために使用するサービスを挿入してください。私の意見では、これは簡単なルートであり、あなたが望むように安全にすることができると私は言うだろう。最初のリンクで必要なのはすべてです。

import {Injectable} from 'angular2/core'; 
    import {Router} from 'angular2/router'; 

    export class User { 
    constructor(
     public email: string, 
     public password: string) { } 
    } 

    var users = [ 
    new User('admin@admin.com','adm9'), 
    new User('user1@gmail.com','a23') 
    ]; 

    @Injectable() 
    export class AuthenticationService { 

    constructor(
     private _router: Router){} 

    logout() { 
     localStorage.removeItem("user"); 
     this._router.navigate(['Login']); 
    } 

    login(user){ 
     var authenticatedUser = users.find(u => u.email === user.email); 
     if (authenticatedUser && authenticatedUser.password === user.password){ 
     localStorage.setItem("user", authenticatedUser); 
     this._router.navigate(['Home']);  
     return true; 
     } 
     return false; 

    } 

    checkCredentials(){ 
     if (localStorage.getItem("user") === null){ 
      this._router.navigate(['Login']); 
     } 
    } 
    } 

ここで、ユーザー配列はユーザ​​ー名/パスワードを確認するものです。これは簡単に何らかのhttp要求、またはどこでもすべてのユーザーを検索したい場合に置き換えることができます。次に、コンポーネントで、任意のデータを表示する前に、checkCredentials（）を呼び出します。