每当页面重新加载或 url 更改发生时，每次调用 typescript 文件

Question

我需要在我的 Angular 5 应用程序中实现一个会话。我想写一个 ts 文件，基本上，这个 ts 文件验证用户是否登录。每当页面重新加载或 URL 更改发生时，我想每次调用这个 ts 文件。如何实施？

Answer 1

使用AuthGuard。

创建一个 auth-guard.service.ts。

import { Injectable } from '@angular/core';
import { CanActivate, CanActivateChild } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild {

  canActivate() {
    console.log('i am checking to see if you are logged in');
    return true;
  }

  canActivateChild() {
    console.log('checking child route access');
    return true;
  }

}

之后在你的路由文件中：

export const appRoutes: Routes = [
  {
    path: 'dashboard',
    children: [
      {
        path: '',
        canActivate: [AuthGuard],
        component: DashboardComponent
      },
      {
        path: 'users',
        component: DashboardUsersComponent,
        canActivateChild: [AuthGuard],
        children: [
          {
            path: '',
            component: DashboardUsersHomeComponent
          },
          {
            path: ':username',
            component: DashboardUserDetailsComponent,
            canDeactivate: [CanDeactivateGuard]
          }
        ]
      }
    ]
  }
]; 

下面是一些参考链接。

https://scotch.io/courses/routing-angular-2-applications/canactivate-and-canactivatechild

https://www.concretepage.com/angular-2/angular-2-4-route-guards-canactivate-and-canactivatechild-example

https://ryanchenkie.com/angular-authentication-using-route-guards