登录验证成功后在angular 6中显示用户名

问题描述

在我的工作中生成了基于令牌的登录身份验证，并将用户名和令牌值存储在localstorage中，登录也成功运行，但用户名未显示。有人可以帮忙吗？

login.component.html

<li class="nav-item">
      <a routerLink ="login"  *ngIf='!rs.loggedUser()' style ="color:white;font-size:18px">{{rs.loggedUser()}}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </li>

login.component.ts

import { Component,OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import {Router} from '@angular/router'
import {RestService} from '../rest.service'


@Component({
  selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(public http: HttpClient,public router: Router,public rs: RestService) { }

  ngOnInit(): void {
this.data= this.rs.loggedUser()
  }
  var_uname; var_pwd; loginsuccess='';userdata; data;
  funlogin(){
    var obj={username: this.var_uname,password: this.var_pwd}
    // this.http.post('http://localhost:1000/login',obj).subscribe(
      this.rs.logindata(obj).subscribe(
    dt => {
      alert(this.loginsuccess = 'you are successfully login')
      this.data =localStorage.setItem('username',obj.username)
    //  console.log(this.data)  
      this.userdata= localStorage.setItem('token',dt.token)
      // localStorage.setItem('obj',JSON.stringify(obj))
  },error => alert(this.loginsuccess = 'Invalid Login Details')
    )
  }
}

rest.service.ts

import { Injectable } from '@angular/core';
import {HttpClient,JsonpInterceptor,HttpHeaders} from "@angular/common/http";
import {Observable,of} from "rxjs";
import {map,catchError} from "rxjs/operators"

@Injectable({
  providedIn: 'root'
})
export class RestService {

loggedIn()
{
  return !!localStorage.getItem('token')
}
loggedUser()

{
  return !!localStorage.getItem('username')
}

loggoutuser()
{
  localStorage.removeItem('token')
}
getToken(){
return localStorage.getItem('token')
}
}

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate,ActivatedRouteSnapshot,RouterStateSnapshot,UrlTree } from '@angular/router';
import { RestService } from './rest.service';
import {Router} from '@angular/router'

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private rest: RestService,private router: Router){}
  canActivate(): boolean{

  if (this.rest.loggedIn()) {
    return true
  }
  else{
    this.router.navigate(['/login'])
  }

  if(this.rest.loggedUser())
  {
    return true
  }
  else{
    this.router.navigate(['/login'])
  }
}
}

请有人检查我的代码并提供参考，以防我的代码出现错误

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）