정적 사이트에 Angular 구성 요소 추가
30715 단어 javascriptbeginnerspodcastwebdev
Angular 구성 요소가 필요한 이유
국민이 원하니까!
데모
이 모든 것을 구축하는 방법에 대해 더 심도 있는 과정을 공유할 계획입니다! 지금은 모든 것이 실제로 작동하는 것을 보는 것만으로도 멋질 것이라고 생각했습니다. 사이트가 로드된 후 Firebase가 어떻게 시작되고 귀하가 프로 회원인지 확인한 다음 사용자 상태를 이해하는 웹 구성 요소를 사용하여 동적으로 항목을 숨기는 방법에 주목하십시오. 여기에서 중요한 부분은 이미 생성된 firebase에 액세스하는 Angular 항목이 많고 바퀴를 다시 발명할 필요가 없다는 것입니다!
image
이 모든 것을 나에게 가르쳐 준 것에 대해 누구에게 감사해야 합니까? Jeff Delaney 에서 https://fireship.io/courses/stripe-payments/
사용자 허용
<ajonp-allow-if>
를 사용하여 요소를 감싸고 해당 구성 요소 내에서 display none을 사용하는 것만큼 쉽습니다.더 이상 광고 없음
예를 들어 사용자가 AJonP에 등록하고
Pro
회원이 되면 더 이상 광고가 표시되지 않습니다. 이를 위해 Hugo Go Partial을 래핑할 수 있습니다.<ajonp-allow-if level="not-user">
<ion-row>
<ion-col text-center>
<div class="ajonp-hide-lg-down">
<!-- /21838128745/ajonp_new -->
<div id="div-gpt-ad-xxxxxxxxxxxxxx-0" style="width: 970px; height: 90px; margin: auto;">
<script> googletag.cmd.push(function () { googletag.display('div-gpt-ad-xxxxxxxxxxxxxx-0'); }); </script>
</div>
</div>
</ion-col>
</ion-row>
</ajonp-allow-if>
각진 부품
템플릿은 꽤 간단합니다. Angular는 구성 요소를 표시하거나
*ngIf
를 기반으로 제거합니다.<div *ngIf="allowed">
<slot></slot>
</div>
<div *ngIf="!allowed">
<slot name="falsey"></slot>
</div>
각도 구성 요소
주목해야 할 몇 가지 사항은 장식입니다. 이렇게 하면 이러한 다양한 항목을 모두
ajonp-allow-if
구성 요소의 속성으로 전달할 수 있습니다. 위의 예제에서는 level="not-user"
를 @Input level
데코레이터에 전달합니다. Angular를 사용하면 놀라운 점은 일반적으로 표준 Angular 구성 요소에서 얻을 수 있는 멋진 종속성 주입을 모두 얻을 수 있다는 것입니다!import { Component, ViewEncapsulation, ChangeDetectorRef, Input, AfterViewInit, ElementRef } from '@angular/core';
import { AuthService } from '../../core/services/auth.service';
@Component({ templateUrl: './allow-if.component.html', encapsulation: ViewEncapsulation.ShadowDom })
export class AllowIfComponent implements AfterViewInit {
@Input() selector;
@Input() level: 'pro' | 'user' | 'not-pro' | 'not-user' | 'not-user-not-pro';
@Input() reverse = false;
@Input() product; constructor( private cd: ChangeDetectorRef, public auth: AuthService, private el: ElementRef, ) {
}
ngAfterViewInit() {
this.el.nativeElement.style.visibility = 'visible';
}
allowed() {
const u = this.auth.userDoc;
const products = u && u.products && Object.keys(u.products);
// Handle Product
if (products && products.includes(this.product)) {
return true;
}
// Handle Level
switch (this.level) {
case 'user':
return u;
case 'pro':
return u && u.is_pro;
case 'not-pro':
return u && !u.is_pro;
case 'not-user':
return !u;
case 'not-user-not-pro': return !u || !u.is_pro;
default: return false;
}
}
}
여기에서 인증을 위해 전체 Firebase 라이브러리를 활용하고 있음을 알 수 있습니다.
import { Injectable, ApplicationRef } from '@angular/core';
import * as firebase from 'firebase/app';
import { user } from 'rxfire/auth';
import { docData } from 'rxfire/firestore';
import { Observable, of } from 'rxjs';
import { switchMap, take, tap, isEmpty } from 'rxjs/operators';
import { AjonpUser } from '../models/ajonp-user';
import { AngularfirebaseService } from './angularfirebase.service';
@Injectable({
providedIn: 'root'
})
export class AuthService {
authClient = firebase.auth();
user$: Observable<any>;
userDoc$: Observable<any>;
user;
userDoc;
constructor(private app: ApplicationRef, private db: AngularfirebaseService) {
// Why service subsciptions? Maintain state between route changes with change detection.
this.user$ = user(this.authClient)
.pipe(tap(u => {
this.user = u;
this.app.tick();
}));
this.userDoc$ = this.getUserDoc$('users').pipe(tap(u => {
this.userDoc = u;
this.app.tick();
}));
this.userDoc$.pipe(take(1)).subscribe((u: AjonpUser) => {
if (u && Object.keys(u).length) {
const ajonpUser: AjonpUser = { uid: u.uid };
this.updateUserData(ajonpUser).catch(error => {
console.log(error);
});
} else {
if (this.user && Object.keys(this.user).length) {
const data: AjonpUser = {
uid: this.user.uid,
email: this.user.email,
emailVerified: this.user.emailVerified,
displayName: this.user.displayName || this.user.email || this.user.phoneNumber,
phoneNumber: this.user.phoneNumber,
photoURL: this.user.photoURL,
roles: {
subscriber: true
}
};
this.setUserData(data).catch(error => {
console.log(error);
});
}
}
});
this.user$.subscribe();
this.userDoc$.subscribe();
}
getUserDoc$(col) {
return user(this.authClient).pipe(
switchMap(u => {
return u ? docData(firebase.firestore().doc(${col}/${(u as any).uid})) : of(null);
})
);
}
///// Role-based Authorization //////
canCreate(u: AjonpUser): boolean {
const allowed = ['admin', 'editor'];
return this.checkAuthorization(u, allowed);
}
canDelete(u: AjonpUser): boolean {
const allowed = ['admin'];
return this.checkAuthorization(u, allowed);
}
canEdit(u: AjonpUser): boolean {
const allowed = ['admin', 'editor'];
return this.checkAuthorization(u, allowed);
}
canRead(u: AjonpUser): boolean {
const allowed = ['admin', 'editor', 'subscriber'];
return this.checkAuthorization(u, allowed);
}
// determines if user has matching role
private checkAuthorization(u: AjonpUser, allowedRoles: string[]): boolean {
if (!u) {
return false;
}
for (const role of allowedRoles) {
if (u.roles[role]) {
return true;
}
}
return false;
}
public setUserData(u: AjonpUser) {
return this.db.set(users/${u.uid}, u);
}
// Sets user data to firestore after succesful signin
private updateUserData(u: AjonpUser) {
return this.db.update(users/${u.uid}, u);
}
signOut() {
this.authClient.signOut();
location.href = '/pro';
}
}
Reference
이 문제에 관하여(정적 사이트에 Angular 구성 요소 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codingcatdev/adding-angular-components-to-your-static-site-1g6k텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)