使用angular4和asp.net core 2 web api做个练习项目(四)-阿里云开发者社区

开发者社区> vNext> 正文

使用angular4和asp.net core 2 web api做个练习项目(四)

简介: 第一部分: http://www.cnblogs.com/cgzl/p/7755801.html 第二部分: http://www.cnblogs.com/cgzl/p/7763397.html 第三部分: http://www.
+关注继续查看

第一部分: http://www.cnblogs.com/cgzl/p/7755801.html

第二部分: http://www.cnblogs.com/cgzl/p/7763397.html

第三部分: http://www.cnblogs.com/cgzl/p/7768147.html

后台代码: https://github.com/solenovex/asp.net-core-2.0-web-api-boilerplate

前台代码: https://github.com/solenovex/angular-4-client-panel-app

Auth Guard

该系统的大部分页面都应该是用户登陆以后才可以看见, 没有登陆的话直接应该跳转到登陆页面.

首先建立authguard:

ng g g guards/auth

代码:

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { User } from 'oidc-client';
import { AuthService } from '../services/auth.service';

@Injectable()
export class AuthGuard implements CanActivate {

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

  canActivate(): Observable<boolean> {
    return this.authService.loginStatusChanged.map((user: User) => {
      if (user) {
        return true;
      }
      this.authService.login();
      return false;
    });
  }
}

然后在app.module.ts里面引用并注册:

import { AuthGuard } from './guards/auth.guard';

const appRoutes: Routes = [
  { path: '', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'login-callback', component: LoginCallbackComponent },
  { path: 'register', component: RegisterComponent },
  { path: 'add-client', component: AddClientComponent, canActivate: [AuthGuard] },
  { path: 'client/:id', component: ClientDetailsComponent, canActivate: [AuthGuard] },
  { path: 'edit-client/:id', component: EditClientComponent, canActivate: [AuthGuard] }
];

  providers: [
    ClientService,
    AuthService,
    AuthGuard
  ],

需要权限控制的路由需要加上 canActivate属性, 它的值是一个数组可以使用多个guards.

别忘了在providers里面注册一下.

然后运行.

进入首页 http://localhost:4200, 如果没登陆, 那么直接跳转到authorization server的登陆页面.

登录成功后, 会跳转到login-callback, 这里有一个地方需要改一下(可能是oidc-client的bug?):

ngOnInit() {
    this.authService.loginCallBack().subscribe(
      (user: User) => {
        if (user) {
          window.location.href = '/';
        }
      }
    );
  }

使用的是window.location.href='/', 如果使用angular的路由router.navigate跳转的话会有问题.

登陆成功后跳转到主页.

做一些清理工作:

由于用户注册是在authorization server进行的, 所以把angular项目中的相关文件以及app.module里面的调用删除...

Settings 系统设置

我们需要做一些全局的设置, 可以全局控制某些参数, 例如我们的余额是否可以输入.

建立settings service:

ng g s services/settings

建立settings model:

ng g interface models/Settings

生成的文件名首字母是小写的, 首字母还是改成大写的吧...

Settings.ts:

export interface Settings {
  disableBalanceOnAdd?: boolean;
  disableBalanceOnEdit?: boolean;
}

settings.service.ts:

import { Injectable } from '@angular/core';
import { Settings } from '../models/Settings';

@Injectable()
export class SettingsService {

  private _settings: Settings = {
    disableBalanceOnAdd: false,
    disableBalanceOnEdit: false
  };

  constructor() { }

  get settings() {
    return this._settings;
  }
}

然后再app.module.ts里面注册:

import { SettingsService } from './services/settings.service';
providers: [

    ClientService,
    AuthService,
    SettingsService,
    AuthGuard
  ]

然后我们使用settings service.

在add-client.component.ts里面:

import { SettingsService } from '../../services/settings.service';

public disableBalanceOnAdd = false;

  constructor(
    public flashMessagesService: FlashMessagesService,
    public router: Router,
    public clientService: ClientService,
    public settingsService: SettingsService
  ) { }

  ngOnInit() {
    this.disableBalanceOnAdd = this.settingsService.settings.disableBalanceOnAdd;
  }

然后运行一下:

发现点击添加按钮不起作用!!!!, 点击明细也不起作用!!!!

后来发现, 是auth service和auth guard里面写错了, 先修改auth service:

  tryGetUser() {
    return Observable.fromPromise(this.manager.getUser());
  }

把这个方法改成public的.

然后修改: auth guard:

  canActivate(): Observable<boolean> {
    return this.authService.tryGetUser().map((user: User) => {
      if (user) {
        return true;
      }
      this.authService.login();
      return false;
    });
  }

这次再试试, 就没有问题了. 进入添加客户页面.

这个栏位的状态会根据settings里面的设置而变化.

同样在edit-client里面修改一下:

import { SettingsService } from '../../services/settings.service';

disableBalanceOnEdit = false;

  constructor(
    public clientService: ClientService,
    public router: Router,
    public route: ActivatedRoute,
    public flashMessagesService: FlashMessagesService,
    public settingsService: SettingsService
  ) { }

  ngOnInit() {
    this.disableBalanceOnEdit = this.settingsService.settings.disableBalanceOnEdit;
    // 获取ID
    this.id = this.route.snapshot.params['id'];
    // 获取Client
    this.clientService.getOne(+this.id).subscribe(
      client => {
        this.client = client;
      }
    );
  }

运行一下, 应该好用!

最后, 做一下Settings页面

需要改一下setting.serviec, 将使用localstorage来存储settings:

import { Injectable } from '@angular/core';
import { Settings } from '../models/Settings';

@Injectable()
export class SettingsService {

  private _settings: Settings = {
    disableBalanceOnAdd: true,
    disableBalanceOnEdit: false
  };

  constructor() {
    if (localStorage.getItem('settings')) {
      this._settings = JSON.parse(localStorage.getItem('settings'));
    }
  }

  get settings() {
    return this._settings;
  }

  set settings(value: Settings) {
    this._settings = value;
    localStorage.setItem('settings', JSON.stringify(this._settings));
  }
}

然后打开settings.component.ts:

import { Component, OnInit } from '@angular/core';
import { SettingsService } from '../../services/settings.service';
import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
import { Settings } from '../../models/Settings';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.css']
})
export class SettingsComponent implements OnInit {

  settings: Settings;

  constructor(
    private settingsService: SettingsService,
    private flashMessagesService: FlashMessagesService,
    private router: Router
  ) { }

  ngOnInit() {
    this.settings = this.settingsService.settings;
  }

  onSubmit() {
    this.settingsService.settings = this.settings;
    this.flashMessagesService.show('Settings 保存了', { cssClass: 'alert-success', timeout: 4000 });
  }

}

这个很简单.

然后是html:

<div class="row">
  <div class="col-md-6">
    <a routerLink="/" class="btn btn-link">
      <i class="fa fa-arrow-circle-o-left"></i> 回到Dashboard</a>
  </div>
  <div class="col-md-6">

  </div>
</div>

<div class="card">
  <div class="card-header">
    <h3>编辑 Settings</h3>
  </div>
  <div class="card-body">
    <form (submit)="onSubmit()">
      <div class="form-group">
        <label for="disableBalanceOnAdd">Disable Blance on Add</label>
        <input type="checkbox" id="disableBalanceOnAdd" name="disableBalanceOnAdd" [(ngModel)]="settings.disableBalanceOnAdd">
      </div>
      <div class="form-group">
        <label for="disableBalanceOnEdit">Disable Blance on Edit</label>
        <input type="checkbox" id="disableBalanceOnEdit" name="disableBalanceOnEdit" [(ngModel)]="settings.disableBalanceOnEdit">
      </div>
      <input type="submit" class="btn btn-primary btn-block" value="Submit">
    </form>
  </div>
</div>

别忘了在app.module里面添加路由:

const appRoutes: Routes = [
  { path: '', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'login-callback', component: LoginCallbackComponent },
  { path: 'add-client', component: AddClientComponent, canActivate: [AuthGuard] },
  { path: 'client/:id', component: ClientDetailsComponent, canActivate: [AuthGuard] },
  { path: 'edit-client/:id', component: EditClientComponent, canActivate: [AuthGuard] },
  { path: 'settings', component: SettingsComponent, canActivate: [AuthGuard] },
  { path: '**', component: PageNotFoundComponent }
];

顺便把page Not found的路由也加上, 使用 ** wildcard.

最后在navbar.html 添加上链接按钮:

        <li *ngIf="isLoggedIn" class="nav-item">
          <a class="nav-link" href="#" routerLink="/settings">Settings </a>
        </li>

运行一下试试:

刷新, 查看添加和编辑页面,再刷新, 应该好用.

这个联系项目就到这了.

然后我要用asp.net core 2.0 web api 和 identity server 4 以及 angular 5 做一个项目了(angular 5正式版刚刚出来), 大约 300个页面......

也许之前还要做一个练习..请各位指教...

 

下面是我的关于ASP.NET Core Web API相关技术的公众号--草根专栏:

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
angularJS 表单使用
1.变量监视 数据双向绑定是指模型与视图的绑定,在$scope.a依赖于$scope.b的情况下,当b变化时a是不会同步变化的。若想实现数据一致,需要使用$scope.$watch()函数。 比如下图所示应用,选择频道后,候选的计数器都是该频道下的计数器。 图1 计数器与频道是对应的 都是下拉列表 对应代码是: // watch $scope.$watch('co
1339 0
《AngularJS高级程序设计》——5.9 使用承诺
承诺是一种表述方式,它表明某项工作会以异步方式执行并在未来某个点被完成。最常遇到的方式是产生Ajax请求,当请求被完成时,浏览器会暗地里发出HTTP请求通知你的应用程序。在清单5-42中,我创建了产生Ajax请求的袖珍AngularJS应用程序。
1250 0
JavaScript创建对象(四)——组合使用构造函数和原型模式
在JavaScript创建对象(三)——原型模式中,我们阐述了原型模式存在的两个问题:一是没办法通过构造函数初始化对象属性,二是共享引用类型的数据导致数据错乱。
813 0
使用IntelliJ IDEA 14和Maven创建java web项目
原文:使用IntelliJ IDEA 14和Maven创建java web项目 http://mark.leanote.com/post/%E4%BD%BF%E7%94%A8IntelliJ-IDEA-14%E5%92%8CMaven%E5%88%9B%E5%BB%BAjava-web%E9%A1%B9%E7%9B%AE 安装Maven 下载安装 去maven官网下载最新版。
1207 0
Asp.Net微型服务器使用次数统计
  AspNet_v2.2(支持.NET3.5及以前版本)AspNet_v2.2.rar http://www.cnblogs.com/waw/archive/2011/10/24/2222398.
597 0
+关注
vNext
Go &amp; Rust 开发者
72
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载