Angular完整项目开发9 - 全局判断用户是否已登录

上一篇制作了前端系统的登录功能，用户输入用户名密码之后，如果登录成功则跳转至device模块。

现在有个问题，即便用户不登陆，在浏览器中直接输入http://localhost:4200/kw/device,也能进入device模块，看到里面的数据。这显然是不合理的，因此需要为前端系统添加以用户是否登录为根据的权限控制。需要实现的效果是：如果用户没有登录，则输入其他有效url例如/kw/device时，页面自动跳转至登录界面；如果用户已经登录，则输入有效url时，可以直接进入对应模块。

登录权限控制的核心思路是把用户登录之后的信息保存下来，在url跳转时进行判断，如果本地有登录信息，则放行，否则切回登录界面。

存储用户登录信息的方法是

 window.sessionStorage["xxxx"] 

对于一次用户会话有效。如果关闭标签或关闭浏览器，则失效。

1. 登录成功后记录用户信息

login.component.ts

login() {
    this.loginService.login(this.user).subscribe(
      (data)=>{ 
          if(data["status"]=="ok"){
            Global.sysuser = data["sysUser"];
            window.sessionStorage["sysuser"] = JSON.stringify(Global.sysuser)
             ...
          }else{
             ...
          }
       }
    );
  }

2. URL跳转时判断是否有登录信息

app.component.ts

import { Router } from '@angular/router';
...
export class AppComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit(): void {
    if(window.sessionStorage["sysuser"] != null){ //已登录
      if(Global.sysuser==null){  Global.sysuser = new Sysuser(); }
      Global.sysuser.init(window.sessionStorage["sysuser"]);
    }else{ //未登录，返回登录界面
      this.router.navigate(['kw'])
    }
  } 
 
}

 

3. 主界面导航栏根据用户是否登录隐藏菜单项

主界面导航栏在任何情况下都是显示的，不过里面的菜单项只有在用户登录之后才能显示。

  

app.component.html

<button mat-button [routerLink]="'/kw/device'" *ngIf="user.id" >设备</button>
<button mat-button [routerLink]="'/kw/sysuser'" *ngIf="user.id">用户</button>

app.component.html

user: Sysuser; //用于控制HTML中元素的显示与隐藏

ngOnInit(): void {
    
    if(window.sessionStorage["sysuser"] != null){
      if(Global.sysuser==null){  Global.sysuser = new Sysuser(); }
      Global.sysuser.init(window.sessionStorage["sysuser"]);

      this.user = Global.sysuser;
     
    }else{
      this.user = new Sysuser();
      this.router.navigate(['kw/login']) //如果没登录，则退回登录界面
}

 

4. 从主界面退回登录界面时清空用户登录状态

如果用户点击了“退出”，或者是点击了浏览器的的回退按钮，那么系统回到登录界面，此时应该清空用户的登录状态。

app.component.ts

export class AppComponent implements OnInit {
  constructor(location: Location, private router: Router) {
    router.events.subscribe(val => {  //监控url的变化    
      if(Global.sysuser == null){
        this.user = new Sysuser();
      }else{
        this.user = Global.sysuser; //更新登录用户信息
      }
    });
   }
   ...
}

login.component.ts

user:Sysuser;

ngOnInit(): void {
    this.user = new Sysuser();
    if(Global.sysuser!=null){
    window.sessionStorage.clear(); //如果判断用户已推出，则清空登录信息
    
    Global.sysuser = null;
    location.reload();
   } 
}

退出后，导航栏上的选项被隐藏了。

问题解决。