Javascript 角度4使用防护装置进行条件显示

我在HomeComponent中使用了以下CANAActivate：

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (localStorage.getItem('currentUser')) {
      // logged in so return true
      return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
    return false;
  }
}

所以在我的app.routing中：

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/index';
import { LoginComponent } from './login/index';
import { RegisterComponent } from './register/index';
import { AuthGuard } from './shared/index';

const appRoutes: Routes = [
    { path: '', component: HomeComponent, canActivate: [AuthGuard] },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },

    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

这是我用来登录的服务：

@Injectable()
export class AuthenticationService {
    constructor(private http: Http) { }

    login(username: string, password: string) {
        console.log('logging in user');
        console.log(username);
        return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password }))
            .map((response: Response) => {
                // login successful if there's a jwt token in the response
                const user = response.json();
                if (user && user.token) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                }

                return user;
            });
    }

    logout() {
        // remove user from local storage to log user out
        localStorage.removeItem('currentUser');
    }
}

我的布局结构如下：

<app-layout-header></app-layout-header>

<app-alert></app-alert>

<router-outlet></router-outlet>

<app-layout-footer></app-layout-footer>

我的头部件看起来像这样：

<nav class="navbar navbar-light">
  <div class="container">
    <a class="navbar-brand" routerLink="/">plant-simulator</a>

    <!-- Show this for logged out users -->
    <ul class="nav navbar-nav pull-xs-right">
      <li class="nav-item">
        <a class="nav-link"
          routerLink="/register"
          routerLinkActive="active">
          Sign Up
        </a>
      </li>
    </ul>

    <!-- Show this for logged in users -->
    <ul class="nav navbar-nav pull-xs-right">
      <li class="nav-item">
        <a class="nav-link"
          [routerLink]="['/profile', currentUser.firstName]"
          routerLinkActive="active">
          {{ currentUser.email }}
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link"
           [routerLink]="['/login']">
           Logout
        </a></li>
    </ul>
  </div>
</nav>

@Injectable()
export class AuthenticationService {
  private isLoggedIn: boolean;
  constructor(private http: Http) { }

  login(username: string, password: string) {
    console.log('logging in user');
    console.log(username);
    return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password }))
      .map((response: Response) => {
          // login successful if there's a jwt token in the response
          const user = response.json();
          if (user && user.token) {
            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('currentUser', JSON.stringify(user));
            // set the isLoggedIn boolean value to true, so that we can display this in the header
            this.isLoggedIn = true;
          }

          return user;
      });
  }

  loggedIn() {
    return this.isLoggedIn;
  }

  logout() {
    // remove user from local storage to log user out
    localStorage.removeItem('currentUser');
    // set the isLoggedIn boolean value to false, so that we can display this in the header
    this.isLoggedIn = false;
  }
}

@Component({
  selector: 'app-layout-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent {
  constructor(
    private authService: AuthenticationService
  ) {}

  isLoggedIn() {
    const isLogged = this.authService.loggedIn();
    console.log('isLogged = ' + isLogged);
    return isLogged;
  }
}

<!-- Show this for logged out users -->
<ul *ngIf='isLoggedIn() == false'
    class="nav navbar-nav pull-xs-right">
  <li class="nav-item">
    <a class="nav-link"
      routerLink="/register"
      routerLinkActive="active">
      Sign Up
    </a>
  </li>
</ul>

<!-- Show this for logged in users -->
<ul *ngIf='isLoggedIn() == true'
    class="nav navbar-nav pull-xs-right">
  <li class="nav-item">
    <a class="nav-link"
      [routerLink]="['/profile', currentUser.id]"
      routerLinkActive="active">
      {{ currentUser.firstname }}
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link"
       [routerLink]="['/login']">
       Logout
    </a></li>
</ul>

My header.html如下所示：

<nav class="navbar navbar-light">
  <div class="container">
    <a class="navbar-brand" routerLink="/">plant-simulator</a>

    <!-- Show this for logged out users -->
    <ul class="nav navbar-nav pull-xs-right">
      <li class="nav-item">
        <a class="nav-link"
          routerLink="/register"
          routerLinkActive="active">
          Sign Up
        </a>
      </li>
    </ul>

    <!-- Show this for logged in users -->
    <ul class="nav navbar-nav pull-xs-right">
      <li class="nav-item">
        <a class="nav-link"
          [routerLink]="['/profile', currentUser.firstName]"
          routerLinkActive="active">
          {{ currentUser.email }}
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link"
           [routerLink]="['/login']">
           Logout
        </a></li>
    </ul>
  </div>
</nav>

@Injectable()
export class AuthenticationService {
  private isLoggedIn: boolean;
  constructor(private http: Http) { }

  login(username: string, password: string) {
    console.log('logging in user');
    console.log(username);
    return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password }))
      .map((response: Response) => {
          // login successful if there's a jwt token in the response
          const user = response.json();
          if (user && user.token) {
            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('currentUser', JSON.stringify(user));
            // set the isLoggedIn boolean value to true, so that we can display this in the header
            this.isLoggedIn = true;
          }

          return user;
      });
  }

  loggedIn() {
    return this.isLoggedIn;
  }

  logout() {
    // remove user from local storage to log user out
    localStorage.removeItem('currentUser');
    // set the isLoggedIn boolean value to false, so that we can display this in the header
    this.isLoggedIn = false;
  }
}

@Component({
  selector: 'app-layout-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent {
  constructor(
    private authService: AuthenticationService
  ) {}

  isLoggedIn() {
    const isLogged = this.authService.loggedIn();
    console.log('isLogged = ' + isLogged);
    return isLogged;
  }
}

<!-- Show this for logged out users -->
<ul *ngIf='isLoggedIn() == false'
    class="nav navbar-nav pull-xs-right">
  <li class="nav-item">
    <a class="nav-link"
      routerLink="/register"
      routerLinkActive="active">
      Sign Up
    </a>
  </li>
</ul>

<!-- Show this for logged in users -->
<ul *ngIf='isLoggedIn() == true'
    class="nav navbar-nav pull-xs-right">
  <li class="nav-item">
    <a class="nav-link"
      [routerLink]="['/profile', currentUser.id]"
      routerLinkActive="active">
      {{ currentUser.firstname }}
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link"
       [routerLink]="['/login']">
       Logout
    </a></li>
</ul>

注册




{{currentUser.firstname}


注销

---

我所做的是否正确？

如果用户已登录，则需要签入authService并使用*ngIf管理DOM

Typescript

constructor(private authService: AuthService,....){}

...
get loggedIn(){
    return this.authService.loggedIn();
}

HTML

....

<!-- Show this for logged in user -->
    <ul *ngIf='isLogged' class="nav navbar-nav pull-xs-right">
      <li class="nav-item">
        <a class="nav-link"
          [routerLink]="['/profile', currentUser.firstName]"
          routerLinkActive="active">
          {{ currentUser.email }}
        </a>
      </li>
   </ul>

您还可以在authService中添加一个方法来获取用户名、用户名等

getProfile() {
    //access to API to get info
  }

---

看看这里：看看我编辑的帖子！我有一个AuthenticationService，它实际进行登录！它是loggedIn，一种检查用户是否实际登录的方法。它将只返回一个布尔值。基于该值，可以在视图中显示/隐藏零件。查看小更新查看我编辑的帖子！我想我错过了一些很小的东西！你能验证一下吗？我想我需要检查一下是真是假！我已经改正了！您能告诉我这是否可以吗？您在authService中登录时遇到的问题是，一旦会话结束，它的值就消失了。将需要为每个会话签入单独的方法。我正在仔细寻找其余的：）