angular - 当用户访问 Ionic 4 中的特定路线时重定向用户
问题描述
我正在使用 Ionic 4 应用程序,并且正在使用登录系统,当用户登录时,它将重定向到用户可以检查用户挑战的页面以及用户未登录时以及是否尝试登录访问该页面,然后它应该重定向到另一个页面。
这是我的userlogin.ts:
async UserLoginDetails($soctype, $socid) {
const loading = await this.loadingController.create({
message: 'Please Wait',
duration: 1100,
translucent: true,
});
await loading.present();
const userdetailslogin = {
email: this.userlogindet.value.email,
password: this.userlogindet.value.password,
social_type: $soctype,
social_id: $socid,
};
this.chakapi.loginUser(userdetailslogin, 'userLogin').subscribe((data) => {
console.log(data);
if (data) {
this.responseEdit = data;
if (this.responseEdit.status === 'success') {
console.log(this.responseEdit.data.id);
this.storage.set('ID', this.responseEdit.data.id);
this.presentAlertConfirm('Login Successful', 1);
} else {
this.presentAlertConfirm('Either You are not registered Or not approved user.', 0);
}
}
});
return await loading.onDidDismiss();
}
async presentAlertConfirm($messge, $para) {
const alert = await this.alertController.create({
message: $messge,
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
// console.log('Confirm Cancel: blah');
if ($para === 1) {
this.modalController.dismiss();
this.router.navigate(['/tabs/tab2']);
}
}
}]
});
await alert.present();
}
当用户登录时,其用户 ID 将存储在存储中。
这是我的tabs.router.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
}
]
},
{
path: 'tab2',
children: [
{
path: '',
loadChildren: '../tab2/tab2.module#Tab2PageModule'
}
]
},
{
path: 'tab4',
children: [
{
path: '',
loadChildren: '../login/login.module#LoginPageModule'
}
]
},
{
path: 'tab3',
children: [
{
path: '',
loadChildren: '../tab3/tab3.module#Tab3PageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
我希望当用户没有登录并且它会尝试访问tab2
路由时,它应该重定向到其他页面。
我应该使用警卫服务还是正确地执行此操作。我将用户 ID 存储在存储中,因为我想多次使用它。
非常感谢任何建议或帮助。请帮我写代码,因为我正在做一个项目,我想按时完成它。
任何帮助深表感谢。
解决方案
您可以使用警卫来完成此操作。守卫将确定用户是否登录。如果没有,用户将被重定向到另一条路线(登录页面或您希望他们登陆的任何地方)。
身份验证.guard.ts
@Injectable({
providedIn: 'root'
})
export class AuthenticationGuard implements CanActivate {
constructor(private _router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
let isLoggedIn: boolean = false;
// NOTE: Do your logic here to determine if the user is logged in or not.
// return true if use is authenticated
if(isLoggedIn) return true;
// else redirect the user to another route and return false.
this._router.navigate(['login']);
return false;
}
}
tabs.router.module.ts
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
...
{
path: 'tab2',
canActivate: [AuthenticationGuard],
children: [
{
path: '',
loadChildren: '../tab2/tab2.module#Tab2PageModule'
}
]
},
...
]
}
...
];
Angular 防护就像过滤器一样使用。您可以向您的路由添加一组防护/过滤器,所有这些都必须满足才能访问该路由(充当链)。在您的路由数组canActivate
中,为您要过滤的路由添加一个属性。在上面的示例中,我将 添加AuthenticationGuard
到仅当用户尝试访问或其任何子项tab2
时才会运行的路由。tab2
您可以放置canActivate
在路线的根部 ( tabs
) 以过滤路线的所有子项tabs
(将过滤tab1
,tab2
等)。
推荐阅读
- fortran - Fortran Wrapper 调用 C 函数
- typescript - 按标准的通用工厂方法
- cmake - 找不到由“Protobuf”提供的具有以下任何名称的包配置文件: ProtobufConfig.cmake protobuf-config.cmake
- python - Intents 无法与 Discord.py 一起使用,同时启用了低谷网站和代码
- .net - 如何自定义“运行 Coverlet Report”Visual Studio 扩展的颜色代码设置?
- android - 如何将android变量的值发送回flutter?
- database - PostgeSQL:验证用户权限
- nginx - ingress-nginx 隐藏域重定向和基于路径的路由
- javascript - 压缩任务中的 uglify 错误插件“gulp-uglify”中的错误
- javascript - 使用 ASCII 代码格式化字符串和删除特殊字符不起作用 (JavaScript)