Angular2:Global Guard(用户必须始终登录) [英] Angular2: Global Guard (user has to be logged in always)
问题描述
我正在构建一个应用程序,未经身份验证的用户根本无法访问.
I'm building an application where there's no access at all for unauthenticated users.
我写了一个LoggedInGuard
,但是现在我必须在路由器配置内的每个路由中添加canActivate: [LoggedInGuard]
(LoginComponent
除外).
I wrote a LoggedInGuard
, but now I have to add canActivate: [LoggedInGuard]
to every route inside my router configuration (except the LoginComponent
).
是否有更好的方法可以使它正常工作?
Is there a better way to get this working?
我的文件/模块布局如下:
My file / module layout looks like this:
app/
AppModule
AppRoutingModule
AppComponent
authentication/
AuthenticationModule
AuthenticationRoutingModule
LoginComponent
contacts/
ContactsModule
ContactsRoutingModule
ContactListComponent
users/
UsersModule
UsersRoutingModule
UserEditComponent
...
也许可以创建两个单独的路由空间(一个用于登录,一个用于应用程序的其余部分),并将防护仅应用于应用程序的其余部分?
我希望有一个简单的解决方案.
I hope there's a simple solution.
提前谢谢!
推荐答案
我认为我以更合乎逻辑的方式进行了操作.我想这是一个意见.我用secured pages
和public pages
分开了我的应用程序.我为每组使用模板.因此public component
和secure component
然后将guard
放在secure template
上.
I think I do it in a much more logical way. I guess it is an opinion. I separate my application by secured pages
and public pages
. I use templates for each set. So public component
and secure component
then put the guard
on the secure template
.
确保将[Guard]
添加到需要保护的完整路由.
Make sure you are adding [Guard]
to the full route that is in need of protection.
因此,当我确定路线时,会将父母添加到app.routing.ts
So when I secure a route I add the parents to app.routing.ts
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full', },
{ path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
{ path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
];
export const routing = RouterModule.forRoot(APP_ROUTES);
确保注意这一行,
{ path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
所以我创建了2个布局
/public/所有公共组件
/public/public.routes.ts
/安全/所有安全组件
/secure/secure.routes.ts
安全路线
请注意,这些路由现在不需要Guard
,因为它是由模板父级处理的.
Notice that these routes do not need Guard
now because it is handled by the template parent.
export const SECURE_ROUTES: Routes = [
{ path: '', redirectTo: 'overview', pathMatch: 'full' },
{ path: 'items', component: ItemsComponent },
{ path: 'overview', component: OverviewComponent },
{ path: 'profile', component: ProfileComponent },
];
app.routing.ts中的主要路线
const APP_ROUTES: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full', },
{ path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
{ path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
];
export const routing = RouterModule.forRoot(APP_ROUTES);
在目录/layouts中,我创建的布局是
And in the directory /layouts I create a layout that is
/layouts/secure.component.ts
/layouts/secure.component.html
/layouts/public.component.ts
/layouts/public.component.html
所有内容均通过布局public
或secure
进行布线,并且[Guard]
处于安全状态.
Everything is routed through the layout public
or secure
and [Guard]
is on secure.
然后,我使用本地存储中的令牌处理身份验证.
Then I handle authentication with a token in the local storage.
@Injectable()
export class Guard implements CanActivate {
constructor(protected router: Router, protected auth: Auth ) {}
canActivate() {
if (localStorage.getItem('access_token')) {
// logged in so return true
return true;
}
// not logged in so redirect to login page
this.router.navigate(['/home']);
return false;
}
}
一旦这样设置我的应用程序,我会将所有需要安全的路由都放在安全目录中,并将公共路由都公开.然后,我在各自目录中的public.routes.ts文件或secure.routes.ts文件中创建它们的路由.
Once I set my app up like this I put all my routes that need to be secure in the secure directory and the public routes in public. Then I create their routes in the public.routes.ts file or the secure.routes.ts file which are in their respective directory.
这篇关于Angular2:Global Guard(用户必须始终登录)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!