Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
305 views
in Technique[技术] by (71.8m points)

javascript - 刷新页面后Angular 8松散数据(Angular 8 loose data after refresh page)

I have isAdmin boolean property which I am checking user logged in as user or admin.(我有isAdmin布尔属性,正在检查以用户或admin身份登录的用户。)

Backend is .net core 2.2, db - Postgre.(后端是.net core 2.2,db-Postgre。) Everything works fine but after refresh I lose isAdmin value.(一切正常,但是刷新后我失去了isAdmin的值。) I have conditional show hide dropdown which is available only for admin roles.(我有条件的show hide下拉列表,仅适用于管理员角色。) How don't lose data after refreshing?(刷新后如何不丢失数据?) PS How to add logic also to my guard for isAdmin property?(PS如何也为isAdmin属性添加逻辑到我的后卫?) My component looks like:(我的组件看起来像:) model: any = {}; constructor(public authService: AuthService, private alertify: AlertifyService, private router: Router) { } ngOnInit() { } login() { this.authService.login(this.model).subscribe(next => { this.model.isAdmin = true; this.alertify.success('Logged in as Admin') }, error => { this.alertify.error(error) }, () => { this.router.navigate(['/projects']) }) } loginAsUser() { this.authService.loginAsUser(this.model).subscribe(next => { this.model.isAdmin = false; this.alertify.success('Logged in as User') }, error => { this.alertify.error(error) }, () => { this.router.navigate(['/home']) }) } loggedIn() { return this.authService.loggedIn(); } logout() { localStorage.removeItem('token'); this.alertify.message('logged out'); this.router.navigate(['/home']) } My html looks like:(我的html看起来像:) <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light"> <div class="container"> <a class="navbar-brand" [routerLink]="['/home']"> <img [src]="iteraLogo" alt="Itera"> </a> <div *ngIf="loggedIn()" class="dropdown" dropdown [hidden]="!model.isAdmin"> <a class="dropdown-toggle" dropdownToggle> <strong class="text-primary">Admin Panel</strong> </a> <div class="dropdown-menu mt-4" *dropdownMenu> <ul class="navbar-nav"> <li class="nav-item" routerLinkActive="router-link-active"> <a class="nav-link" [routerLink]="['/projects']">Projects</a> </li> <li class="nav-item" routerLinkActive="router-link-active"> <a class="nav-link" [routerLink]="['/hypervisors']">Hypervisors</a> </li> <li class="nav-item" routerLinkActive="router-link-active"> <a class="nav-link" [routerLink]="['/management']">Management</a> </li> <li class="nav-item" routerLinkActive="router-link-active"> <a class="nav-link" [routerLink]="['/users']">Users</a> </li> <li class="nav-item" routerLinkActive="router-link-active"> <a class="nav-link" [routerLink]="['/user-projects']">Users Projects</a> </li> </ul> </div> </div> <ul class="navbar-nav mr-auto"> <li class="nav-item" routerLinkActive="router-link-active"> <a class="nav-link" [routerLink]="['/test']">About</a> </li> </ul> <div *ngIf="loggedIn()" class="dropdown" dropdown> <a class="dropdown-toggle" dropdownToggle> Welcome <strong>{{ authService.decodedToken?.unique_name | titlecase }}</strong> </a> <div class="dropdown-menu mt-3" *dropdownMenu> <a class="dropdown-item text-primary" [routerLink]="['/projects/', authService.decodedToken?.nameid ]"><i class="fa fa-archive">&nbsp;My Projects</i></a> <div class="dropdown-divider"></div> <a class="dropdown-item text-danger" (click)="logout()"><i class="fa fa-sign- out">&nbsp;Logout</i></a> </div> </div> <form *ngIf="!loggedIn()" #loginForm="ngForm" class="form-inline my-2 my-lg-0"> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fa fa-user-circle-o text-primary" aria-hidden="true"></i> </div> </div> <input class="form-control" placeholder="Username" name="username" required [(ngModel)]="model.username" /> </div> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text"> <i class="fa fa-unlock text-danger" aria-hidden="true"></i> </div> </div> <input class="form-control" placeholder="Password" name="password" required type="password" [(ngModel)]="model.password" /> </div> <div> <button [disabled]="!loginForm.valid" type="submit" (click)="loginAsUser()" class="btn btn-primary my-2 my-sm-0"> <i class="fa fa-user-circle" aria-hidden="true"></i>&nbsp;User </button> <button [disabled]="!loginForm.valid" type="submit" (click)="login()" class="btn btn-success my-2 my-sm-0"> <i class="fa fa-user-secret" aria-hidden="true"></i>&nbsp;Admin </button> </div> </form> </div> </nav> My guard looks like:(我的守卫看起来像:) canActivate(): boolean { if(this.authService.loggedIn()) { return true } this.alertify.error('You have no access to see this page!!!'); this.router.navigate(['/home']); return false; }   ask by Arzu Suleymanov translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You will have to store your Auth_Token in localhost/indexDB/SessionStorage and then inside your route guard check if that token is valid or not.(您将必须将Auth_Token存储在localhost / indexDB / SessionStorage中 ,然后在路由保护器内部检查该令牌是否有效。)

This way your app will not require authentication until your token is valid .(这样,在令牌有效之前,您的应用将不需要身份验证 。) Use this npm module to achieve this : enter link description here(使用此npm模块可实现此目的: 在此处输入链接描述)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...