在ASP.NET Core中使用Angular2，以及與Angular2的Token base身份認證

時間 2019-11-15

標籤 asp.net asp core 使用 angular2 angular 以及 token base 身份認證欄目 ASP 简体版

原文原文鏈接

注：下載本文提到的完整代碼示例請訪問：How to authorization Angular 2 app with asp.net core web apijavascript

在ASP.NET Core中使用Angular2，以及與Angular2的Token base身份認證

Angular2是對Angular1的一次完全的，破壞性的更新。css

相對於Angular1.x，借用某果的廣告語，惟一的不一樣，就是到處都不一樣。html

首先，推薦的語言已經再也不是Javascript，取而代之的TypeScript，(TypeScript = ES6 + 類型系統 + 類型註解), TypeScriipt的類型系統對於開發複雜的單頁Web app大有幫助，同時編譯成javascript後的執行效率也比大多數手寫javascript要快。有興趣的同窗能夠查閱官方文檔：英文傳送門 | 中文傳送門。
得益於完全重構，性能相對於Angular1.x有了大幅提高，也更適合再全平臺部署。
Angular2是基於Component的，Component能夠理解爲是1.x時代的Controller + $Scope + view
View的不少語法也作了更新，好比<li ng-repeat="movie in vm.movies"></li> 變成了 <li *ngFor="let movie of movies"></li>
等等。。

關於Angular2，強烈建議查閱官方文檔：英文傳送門 | 中文傳送門java

廢話很少說，接下來的內容中，將介紹如何將 Angular2 整合到 ASP.NET Core 中，並實現一個Anguar2 和 ASP.NET Core Web API 的身份認證。node

注意：本文章屬於Step by step + Code Sample教程，且篇幅較長，建議下載本Sample並跟着本文進度本身重作一遍本例，下載完整代碼並分析代碼結構纔有意義，下載地址：How to authorization Angular 2 app with asp.net core web apigit

1.前期準備

推薦使用VS2015 Update3或更新的版本完成本示例，下載地址：https://www.visualstudio.com/
你須要安裝.NET Core開發環境，這裏提供VS版:https://www.microsoft.com/net/core#windows
安裝Node.js 版本5.0.0或以上，（在本例中，這個主要是編譯TypeScript用的）下載地址：Node.js and NPM
NPM 3.0.0或以上，默認NPM會隨着Node.js一併安裝完畢。（在本例中，這個主要是下載各類Angular的各個包用的，參考VS中的Nuget）

2.建立項目

在VS中新建項目，項目類型選擇 ASP.NET Core Web Application(.Net Core)，輸入項目名稱爲：CSAuthorAngular2InASPNetCore，Template選擇爲Empty.github

3.在項目中整合Angular2

3.1.配置Startup.cs

注：添加下面的代碼時IDE會報代碼錯誤，這是由於尚未引用對用的包，進入報錯的這一行，點擊燈泡，加載對應的包就能夠了。web

（圖文無關）typescript

在ConfigureServices中添加以下代碼npm

services.AddMvc();

這裏是添加MVC服務

在Configure中添加以下代碼

app.UseStaticFiles();

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}");
});

第一句是啓用靜態文件，第二句是應用MVC模式並添加路由配置。

完整的代碼應該是這個樣子

public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}");
        });
    }
}

3.2.添加控制器以及視圖

3.2.1.在項目根目錄下添加Controllers目錄，並在其中添加一個控制器HomeController.cs，默認代碼便可。

3.2.2.在項目跟目錄下建立Views目錄，在Views目錄中新建目錄Home, 最後在Home目錄中新建視圖Index.cshtml，內容應該是這樣：

<html>
<head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
<!-- 3. Display the application -->
<body>
    <my-app>Loading...</my-app>
</body>
</html>

如今運行項目的話你僅僅能看到一個Loading，再控制檯中你還能看到錯誤，這是由於咱們尚未配置Angular。讓咱們前往wwwroot目錄。

3.3.在項目的wwwroot目錄中添加以下結構:

3.3.1搭建Angular2基礎環境

package.json

{
  "name": "angular-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "licenses": [ { "type": "MIT", "url": "https://github.com/angular/angular.io/blob/master/LICENSE" } ], "dependencies": { "@angular/common": "2.0.2", "@angular/compiler": "2.0.2", "@angular/core": "2.0.2", "@angular/forms": "2.0.2", "@angular/http": "2.0.2", "@angular/platform-browser": "2.0.2", "@angular/platform-browser-dynamic": "2.0.2", "@angular/router": "3.0.2", "@angular/upgrade": "2.0.2", "angular-in-memory-web-api": "0.1.5", "bootstrap": "3.3.7", "core-js": "2.4.1", "reflect-metadata": "0.1.8", "rxjs": "5.0.0-beta.12", "systemjs": "0.19.39", "zone.js": "0.6.25" }, "devDependencies": { "concurrently": "3.0.0", "gulp": "^3.9.1", "lite-server": "2.2.2", "typescript": "2.0.3", "typings": "1.4.0" } }

systemjs.config.js

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/' }, // map tells the System loader where to look for things  map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' }, // packages tells the System loader how to load when no filename and/or no extension  packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } }); })(this);

tsconfig.js

{
  "compileOnSave": true, "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules" ] }

typings.json(注，在最新文檔中typings已被npm的@types替代，參見官方文檔:文檔變動日誌)

{
  "globalDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160725163759", "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", "node": "registry:dt/node#6.0.0+20160909174046" } }

右擊wwwroot中的Package.json,選擇Restore Packages（或者在CMD下進入wwwroot目錄，並執行命令 npm install）,npm會去下載須要的包,並存儲於node_modules目錄中。

3.3.2.配置啓動文件以啓用Angular2

在wwwroot下新建目錄app,app擁有以下文件：

app.component.ts
```
import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: "this is in angular2",
})
export class AppComponent {
}
```
能夠發現被@Component裝飾屬性裝飾了AppComponent，selector指代你Component的佔位符，好比本例中你能夠再Home/index.cshtml中發現一段這樣的標記
```
<my-app>Loading...</my-app>
```
template既爲該Component的View，不要忘記moduleId，不添加它會出現不少奇怪的問題。

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppComponent } from "./app.component";

@NgModule({
    bootstrap: [AppComponent],
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

基礎整合完畢。

按F5 Debug一下，如今你能再瀏覽器中看到一句話：this is in angular 2

---分割線-------------------------------------------------------------------------

4.實現身份認證

廢了半天勁，看着很傻，沒有任何成就感。怎麼辦，讓咱們再深刻一點，接下來咱們來爲Angular2完成一個Token base的身份驗證，我會把Angular2的routing,data bind,service,http,等等你工做中最經常使用到的挨個演示一遍。

4.1.Server端

4.1.1.建立一些輔助類

4.1.1.1.在項目根目錄下建立一個文件夾Auth,並添加RSAKeyHelper.cs以及TokenAuthOption.cs兩個文件

在RSAKeyHelper.cs中

using System.Security.Cryptography;

namespace CSTokenBaseAuth.Auth
{
    public class RSAKeyHelper
    {
        public static RSAParameters GenerateKey()
        {
            using (var key = new RSACryptoServiceProvider(2048))
            {
                return key.ExportParameters(true);
            }
        }
    }
}

在TokenAuthOption.cs中

using System;
using Microsoft.IdentityModel.Tokens;

namespace CSTokenBaseAuth.Auth
{
    public class TokenAuthOption
    {
        public static string Audience { get; } = "ExampleAudience";
        public static string Issuer { get; } = "ExampleIssuer";
        public static RsaSecurityKey Key { get; } = new RsaSecurityKey(RSAKeyHelper.GenerateKey());
        public static SigningCredentials SigningCredentials { get; } = new SigningCredentials(Key, SecurityAlgorithms.RsaSha256Signature);

        public static TimeSpan ExpiresSpan { get; } = TimeSpan.FromMinutes(20);
    }
}

4.1.1.2.在項目根目錄下建立目錄Model,並在其中添加RequestResult.cs，代碼應該是這樣。

public class RequestResult
{
    public RequestState State { get; set; }
    public string Msg { get; set; }
    public Object Data { get; set; }
}

public enum RequestState
{
    Failed = -1,
    NotAuth = 0,
    Success = 1
}

4.1.2更新Startup.cs

在ConfigureServices中添加以下代碼：

services.AddAuthorization(auth =>
{
    auth.AddPolicy("Bearer", new AuthorizationPolicyBuilder()
        .AddAuthenticationSchemes(JwtBearerDefaults.AuthenticationScheme‌)
        .RequireAuthenticatedUser().Build());
});

這裏是添加身份認證服務

在Configure方法中添加以下代碼：

app.UseExceptionHandler(appBuilder =>
{
    appBuilder.Use(async (context, next) =>
    {
        var error = context.Features[typeof(IExceptionHandlerFeature)] as IExceptionHandlerFeature;

        //when authorization has failed, should retrun a json message to client
        if (error != null && error.Error is SecurityTokenExpiredException)
        {
            context.Response.StatusCode = 401;
            context.Response.ContentType = "application/json";

            await context.Response.WriteAsync(JsonConvert.SerializeObject(new RequestResult
            {
                State = RequestState.NotAuth,
                Msg = "token expired"
            }));
        }
        //when orther error, retrun a error message json to client
        else if (error != null && error.Error != null)
        {
            context.Response.StatusCode = 500;
            context.Response.ContentType = "application/json";
            await context.Response.WriteAsync(JsonConvert.SerializeObject(new RequestResult
            {
                State = RequestState.Failed,
                Msg = error.Error.Message
            }));
        }
        //when no error, do next.
        else await next();
    });
});

本段是Handle當身份認證失敗時拋出的異常，並返回合適的json

在相同的方法中添加另一段代碼：

app.UseJwtBearerAuthentication(new JwtBearerOptions()
{
    TokenValidationParameters = new TokenValidationParameters()
    {
        IssuerSigningKey = TokenAuthOption.Key,
        ValidAudience = TokenAuthOption.Audience,
        ValidIssuer = TokenAuthOption.Issuer,
        // When receiving a token, check that we've signed it.
        ValidateIssuerSigningKey = true,
        // When receiving a token, check that it is still valid.
        ValidateLifetime = true,
        // This defines the maximum allowable clock skew - i.e. provides a tolerance on the token expiry time 
        // when validating the lifetime. As we're creating the tokens locally and validating them on the same 
         // machines which should have synchronised time, this can be set to zero. Where external tokens are
        // used, some leeway here could be useful.
        ClockSkew = TimeSpan.FromMinutes(0)
    }
});

本段代碼是應用JWTBearerAuthentication身份認證。

4.1.3.TokenAuthController.cs

在Controllers中新建一個Web API Controller Class，命名爲TokenAuthController.cs。咱們將在這裏完成登陸受權，

在同文件下添加兩個類，分別用來模擬用戶模型，以及用戶存儲，代碼應該是這樣:

public class User
{
    public Guid ID { get; set; }
    public string Username { get; set; }
    public string Password { get; set; }
}

public static class UserStorage
{
    public static List<User> Users { get; set; } = new List<User> {
        new User {ID=Guid.NewGuid(),Username="user1",Password = "user1psd" },
        new User {ID=Guid.NewGuid(),Username="user2",Password = "user2psd" },
        new User {ID=Guid.NewGuid(),Username="user3",Password = "user3psd" }
    };
}

接下來在TokenAuthController.cs中添加以下方法

private string GenerateToken(User user, DateTime expires)
{
    var handler = new JwtSecurityTokenHandler();
    
    ClaimsIdentity identity = new ClaimsIdentity(
        new GenericIdentity(user.Username, "TokenAuth"),
        new[] {
            new Claim("ID", user.ID.ToString())
        }
    );

    var securityToken = handler.CreateToken(new SecurityTokenDescriptor
    {
        Issuer = TokenAuthOption.Issuer,
        Audience = TokenAuthOption.Audience,
        SigningCredentials = TokenAuthOption.SigningCredentials,
        Subject = identity,
        Expires = expires
    });
    return handler.WriteToken(securityToken);
}

該方法僅僅只是生成一個Auth Token,接下來咱們來添加另一個方法來調用它

在相同文件中添加以下代碼

[HttpPost]
public string GetAuthToken(User user)
{
    var existUser = UserStorage.Users.FirstOrDefault(u => u.Username == user.Username && u.Password == user.Password);

    if (existUser != null)
    {
        var requestAt = DateTime.Now;
        var expiresIn = requestAt + TokenAuthOption.ExpiresSpan;
        var token = GenerateToken(existUser, expiresIn);

        return JsonConvert.SerializeObject(new {
            stateCode = 1,
            requertAt = requestAt,
            expiresIn = TokenAuthOption.ExpiresSpan.TotalSeconds,
            accessToken = token
        });
    }
    else
    {
        return JsonConvert.SerializeObject(new { stateCode = -1, errors = "Username or password is invalid" });
    }
}

接下來咱們來完成受權部分，在相同的文件中添加以下代碼：

public string GetUserInfo()
{
    var claimsIdentity = User.Identity as ClaimsIdentity;

    return JsonConvert.SerializeObject(new RequestResult
    {
        State = RequestState.Success,
        Data = new
        {
            UserName = claimsIdentity.Name
        }
    });
}

爲方法添加裝飾屬性

[HttpGet]
[Authorize("Bearer")]

第二行代碼說明這個action須要身份驗證。

該文件完整的代碼應該是這個樣子：

using System;
using System.Collections.Generic;
using System.Linq;using Microsoft.AspNetCore.Mvc;
using CSAuthorAngular2InASPNetCore.Auth;
using System.IdentityModel.Tokens.Jwt;
using Newtonsoft.Json;
using System.Security.Claims;
using System.Security.Principal;
using Microsoft.IdentityModel.Tokens;
using CSAuthorAngular2InASPNetCore.Model;
using Microsoft.AspNetCore.Authorization;


namespace CSAuthorAngular2InASPNetCore.Controllers
{
    [Route("api/[controller]")]
    public class TokenAuthController : Controller
    {
        [HttpPost]
        public string GetAuthToken([FromBody]User user)
        {
            var existUser = UserStorage.Users.FirstOrDefault(u => u.Username == user.Username && u.Password == user.Password);

            if (existUser != null)
            {
                var requestAt = DateTime.Now;
                var expiresIn = requestAt + TokenAuthOption.ExpiresSpan;
                var token = GenerateToken(existUser, expiresIn);

                return JsonConvert.SerializeObject(new RequestResult
                {
                    State = RequestState.Success,
                    Data = new
                    {
                        requertAt = requestAt,
                        expiresIn = TokenAuthOption.ExpiresSpan.TotalSeconds,
                        tokeyType = TokenAuthOption.TokenType,
                        accessToken = token
                    }
                });
            }
            else
            {
                return JsonConvert.SerializeObject(new RequestResult
                {
                    State = RequestState.Failed,
                    Msg = "Username or password is invalid"
                });
            }
        }

        private string GenerateToken(User user, DateTime expires)
        {
            var handler = new JwtSecurityTokenHandler();

            ClaimsIdentity identity = new ClaimsIdentity(
                new GenericIdentity(user.Username, "TokenAuth"),
                new[] {
                    new Claim("ID", user.ID.ToString())
                }
            );

            var securityToken = handler.CreateToken(new SecurityTokenDescriptor
            {
                Issuer = TokenAuthOption.Issuer,
                Audience = TokenAuthOption.Audience,
                SigningCredentials = TokenAuthOption.SigningCredentials,
                Subject = identity,
                Expires = expires
            });
            return handler.WriteToken(securityToken);
        }

        [HttpGet]
        [Authorize("Bearer")]
        public string GetUserInfo()
        {
            var claimsIdentity = User.Identity as ClaimsIdentity;

            return JsonConvert.SerializeObject(new RequestResult
            {
                State = RequestState.Success,
                Data = new
                {
                    UserName = claimsIdentity.Name
                }
            });
        }
    }

    public class User
    {
        public Guid ID { get; set; }

        public string Username { get; set; }

        public string Password { get; set; }
    }

    public static class UserStorage
    {
        public static List<User> Users { get; set; } = new List<User> {
            new User {ID=Guid.NewGuid(),Username="user1",Password = "user1psd" },
            new User {ID=Guid.NewGuid(),Username="user2",Password = "user2psd" },
            new User {ID=Guid.NewGuid(),Username="user3",Password = "user3psd" }
        };
    }
}

4.2Angular2端

4.2.1建立View Model

在wwwroot/app下建立一個目錄：_model，並添加一個Typescript文件RequestResult.ts，內容應該是這樣。

export class RequestResult {
    State: number;
    Msg: string;
    Data: Object;
}

4.2.2建立Service

在wwwroot/app下建立一個目錄：_services，並添加一個Typescript文件auth.service.ts，內容應該是這樣。

import { Injectable } from "@angular/core";
import { Headers, Http } from "@angular/http";
import "rxjs/add/operator/toPromise";

import { RequestResult } from "../_model/RequestResult";

@Injectable()
export class AuthService {
    private tokeyKey = "token";
    private token: string;

    constructor(
        private http: Http
    ) { }

    login(userName: string, password: string): Promise<RequestResult> {
        return this.http.post("/api/TokenAuth", { Username: userName, Password: password }).toPromise()
            .then(response => {
                let result = response.json() as RequestResult;
                if (result.State == 1) {
                    let json = result.Data as any;

                    sessionStorage.setItem("token", json.accessToken);
                }
                return result;
            })
            .catch(this.handleError);
    }

    checkLogin(): boolean {
        var token = sessionStorage.getItem(this.tokeyKey);
        return token != null;
    }

    getUserInfo(): Promise<RequestResult> {
        return this.authGet("/api/TokenAuth");
    }

    authPost(url: string, body: any): Promise<RequestResult> {
        let headers = this.initAuthHeaders();
        return this.http.post(url, body, { headers: headers }).toPromise()
            .then(response => response.json() as RequestResult)
            .catch(this.handleError);
    }

    authGet(url): Promise<RequestResult> {
        let headers = this.initAuthHeaders();
        return this.http.get(url, { headers: headers }).toPromise()
            .then(response => response.json() as RequestResult)
            .catch(this.handleError);
    }

    private getLocalToken(): string {
        if (!this.token) {
            this.token = sessionStorage.getItem(this.tokeyKey);
        }
        return this.token;
    }

    private initAuthHeaders(): Headers {
        let token = this.getLocalToken();
        if (token == null) throw "No token";

        var headers = new Headers();
        headers.append("Authorization", "Bearer " + token);

        return headers;
    }

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}

本文件主要用來完成登陸以及登陸驗證工做，以後該service將能夠被注入到Component中以便被Component調用。

注：主要的邏輯都應該寫到service中

4.2.3.建立Component

4.2.3.1.在wwwroot/app下建立一個目錄home,該目錄用來存放HomeComponent,home應擁有以下文件：

home.component.ts

import { Component, OnInit } from "@angular/core";

import { AuthService } from "../_services/auth.service";

@Component({
    moduleId: module.id,
    selector: "my-home",
    templateUrl: "view.html",
    styleUrls: ["style.css"]
})
export class HomeComponent implements OnInit {
    isLogin = false;
    userName: string;
    
    constructor(
        private authService: AuthService
    ) { }

    ngOnInit(): void {
        this.isLogin = this.authService.checkLogin();
        if (this.isLogin) {
            this.authService.getUserInfo().then(res => {
                this.userName = (res.Data as any).UserName;
            });
        }

    }
}

查閱代碼，在@Component中指定了View以及style。

AuthService被在構造方法中被注入了本Component，ngOnInit是接口OnInit的一個方法，他在Component初始化時會被調用。

style.css
```
/*styles of this view*/
```
本例中沒有添加任何樣式，若有須要能夠寫在這裏。

view.html

<div *ngIf="isLogin">
    <h1>Hi <span>{{userName}}</span></h1>
</div>

<div *ngIf="!isLogin">
    <h1>please login</h1>
    <a routerLink="/login">Login</a>
</div>

*ngIf=""是Angular2 的其中一種標記語法，做用是當返回真時渲染該節點，完整教程請參閱官方文檔。

4.2.3.2.在wwwroot/app下建立目錄Login,該目錄用來存放LoginComponent,文件結構相似於上一節。

import { Component } from "@angular/core";
import { Router } from '@angular/router';

import { AuthService } from "../_services/auth.service";

@Component({
    moduleId: module.id,
    selector: "my-login",
    templateUrl: "view.html",
    styleUrls: ["style.css"]
})
export class LoginComponent {

    private userName: string;
    private password: string;

    constructor(
        private authService: AuthService,
        private router: Router
    ) { }

    login() {
        this.authService.login(this.userName, this.password)
            .then(result => {
                if (result.State == 1) {
                    this.router.navigate(["./home"]);
                }
                else {
                    alert(result.Msg);
                }
            });
    }
}

style.css
```
/*styles of this view*/
```

view.html

<table>
    <tr>
        <td>userName:</td>
        <td><input [(ngModel)]="userName" placeholder="useName:try type user1" /></td>
    </tr>
    <tr>
        <td>userName:</td>
        <td><input [(ngModel)]="password" placeholder="password:try type user1psd" /></td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" (click)="login()" value="Login" /></td>
    </tr>
</table>

4.2.4.應用路由

路由是切換多頁面用的。

在wwwroot/app下新建一個Typescript文件，命名爲app-routing.module.ts，內容應該是這個樣子。

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";

import { HomeComponent } from "./home/home.component";
import { LoginComponent } from "./login/login.component"

const routes: Routes = [
    { path: "", redirectTo: "/home", pathMatch: "full" },
    { path: "home", component: HomeComponent },
    { path: "login", component: LoginComponent }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

接下來咱們來應用這個路由，

打開app.module.ts，更新代碼以下：

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpModule } from "@angular/http";
import { FormsModule } from "@angular/forms";

import { AppRoutingModule } from "./app-routing.module";

import { AuthService } from "./_services/auth.service";

import { AppComponent } from "./app.component";
import { HomeComponent } from "./home/home.component";
import { LoginComponent } from "./login/login.component";

@NgModule({
    bootstrap: [AppComponent],
    imports: [
        BrowserModule,
        HttpModule,
        AppRoutingModule,
        FormsModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent
    ],
    providers: [AuthService]
})
export class AppModule { }

NgModule和BrowserModule你能夠理解爲基礎模塊，必加的。

HttpModule是作http請求用的。

FormsModule是作雙向數據綁定用的，好比下面這樣的，若是想把數據從view更新到component，就必須加這個。

<input [(ngModel)]="userName" placeholder="useName:try type user1" />

AppRoutingModule即爲咱們剛纔添加的路由文件。

AuthService是咱們最先添加的service文件。

AppComponent是咱們最初添加的那個app.component.ts裏的那個component.

HomeComponent,LoginComponent同上。

最後咱們再app.component.ts中添加路由錨點，

把template的值爲 "<router-outlet></router-outlet>"

完整的代碼應該是這樣：

import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    template: "<router-outlet></router-outlet>",
})
export class AppComponent {
}

router-outlet是路由錨點的關鍵詞。

至此，全部代碼完成，F5調試吧。

完整的Angular2的入門教程，請參閱官方文檔的《英雄指南》：中文傳送門 | 英文傳送門

關於本例完整的代碼以及調試運行步驟，請訪問：How to authorization Angular 2 app with asp.net core web api