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] 添加到我的路由器配置中的每条路由(除了登录组件).

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 个布局

So I create 2 layouts

/public/所有公共组件

/public/public.routes.ts

/secure/所有安全组件

/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屋！