如何解决如何验证FireAuth邮件并按角度导航
我已经通过使用电子邮件和密码进行注册,然后使用sendEmailVerification()fireAuth来创建用户。我收到了邮件...现在,仅在验证邮件之后才需要输入我的应用程序...。 。在Angular中
authService.ts:
createUser(user) {
console.log(user);
this.afAuth.createUserWithEmailAndPassword( user.email,user.password)
.then( userCredential => {
this.newUser = user;
console.log(userCredential);
userCredential.user.sendEmailVerification();
this.router.navigate(['/account/verify']);
userCredential.user.updateProfile( {
displayName: user.firstName + ' ' + user.lastName
});
this.insertUserData(userCredential)
.then(() => {
console.log('the result:',userCredential)
});
})
.catch( error => {
this.eventAuthError.next(error);
});
}
解决方法
首先,在发送验证链接的同时,传递如下所示的actionCodesettings,以便您可以在成功验证电子邮件时提供重定向URL(项目的URL)。
createUser(user) {
console.log(user);
this.afAuth.createUserWithEmailAndPassword( user.email,user.password)
.then( userCredential => {
this.newUser = user;
console.log(userCredential);
var actionCodeSettings = {
url: `${your-project-base-url}/account/verify`
}
userCredential.user.sendEmailVerification(actionCodeSettings);
userCredential.user.updateProfile( {
displayName: user.firstName + ' ' + user.lastName
});
this.insertUserData(userCredential)
.then(() => {
console.log('the result:',userCredential)
});
})
.catch( error => {
this.eventAuthError.next(error);
});
}
现在,为了保护您的应用程序路由,您可以实施保护措施。一个工作警卫的例子如下:
import { Injectable } from '@angular/core';
import { CanActivate,ActivatedRouteSnapshot,RouterStateSnapshot,UrlTree,Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AngularFireAuth } from "@angular/fire/auth";
import { AccountPathNameService } from '../../../shared/services';
@Injectable({
providedIn: 'root'
})
export class VerifyEmailGuard implements CanActivate {
constructor(
private router: Router,public angularfireAuthentication: AngularFireAuth,) {
}
canActivate(
next: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
return new Promise((resolve,reject) => {
this.angularfireAuthentication.authState.subscribe(user => {
if (user) {
if (user.emailVerified) {
resolve(false);
this.router.navigate([`${your-protected-route-eg.dashboard}`]);
} else {
resolve(true);
}
} else {
resolve(false);
this.router.navigate(['/']);
}
})
})
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。