[英]Angular routing change in url
I am making angular 7 application where i am making redirection via router and auth guard.. 我正在使用Angle 7应用程序,通过路由器和身份验证保护程序进行重定向。
Html: HTML:
https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm?file=app%2Fhome%2Fhome.component.html https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm?file=app%2Fhome%2Fhome.component.html
<p *ngIf="showUserRoute">
<a [routerLink]="['/user']">User</a>
</p>
<p><a [routerLink]="['/login']">Logout</a></p>
Here you could able to see a ngIf , 在这里您可以看到ngIf ,
<p *ngIf="showUserRoute">
<a [routerLink]="['/user']">User</a>
</p>
For which the ts: 对于ts:
https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm?file=app%2Fhome%2Fhome.component.ts https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm?file=app%2Fhome%2Fhome.component.ts
ngOnInit() {
let user = JSON.parse(localStorage.getItem('currentUser'));
console.log(user.token);
if(user.token == "fake-jwt-token") {
this.showUserRoute = false;
}
}
Here if user.token == "fake-jwt-token"
then i should not allow the user to navigate to user
url.. 如果
user.token == "fake-jwt-token"
那么我不应该允许用户导航到user
url。
It hides the url now , No issue regarding it.. 它现在隐藏url ,对此没有问题。
The issue is even though <a [routerLink]="['/user']">User</a>
kept in hidden, an user can change the url manually so if he makes the url like, 问题是即使
<a [routerLink]="['/user']">User</a>
处于隐藏状态,用户也可以手动更改网址 ,因此,如果他将网址<a [routerLink]="['/user']">User</a>
Adding user at last in url 最后在网址中添加用户
https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user
, it is redirecting to user page.. https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user
,它正在重定向到用户页面。
My requirement is if the user changes the url like the above, it should not be allowed and the redirection needs to happen to previous state.. 我的要求是,如果用户像上面那样更改url,则不应允许该URL,并且重定向需要发生到先前的状态。
You can explore working stackblitz https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm 您可以浏览工作中的stackblitz https://stackblitz.com/edit/angular-6-jwt-authentication-example-tsu2sm
and you can get what i am in the need.. 您就可以得到我所需要的。
In the stackblitz if you give https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user
then it will redirect to user component, but whereas our home page has a condition if the logged in user has "fake-jwt-token"
then the user is strictly not allowed to access the user
url and component.. 在stackblitz中,如果您提供
https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user
则它将重定向到用户组件,但是如果登录的用户具有"fake-jwt-token"
,则用户是严格不允许访问user
URL和组件..
Edit 编辑
I am not asking to prevent from login , the user can logged in and can taken to home component but if the user has fake-jwt-token
, then he was not allowed to go to /user
url alone but he can access other page.. 我并不是要阻止登录 ,该用户可以登录并可以转到home组件,但是如果该用户具有
fake-jwt-token
,则不允许他单独进入/user
URL,但他可以访问其他页面。 。
User having fake-jwt-token
can logged in successfully but need protected from going into https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user
具有
fake-jwt-token
用户可以成功登录,但需要防止进入https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user
Step 1: 第1步:
User can login using test and test as username and password 用户可以使用test登录,并以用户名和密码作为test
Step 2: 第2步:
After giving the credentials user will be redirected to home component. 提供凭据后,用户将被重定向到本地组件。
Step 3: Now the logged in user has fake-jwt-token
so after logged in restrict him from accessing user
component so if he gives url like this from home component https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user
, then redirect back to home component.. 步骤3:现在,已登录的用户拥有了
fake-jwt-token
因此登录后限制了他访问user
组件的user
因此,如果他从本地组件https://angular-6-jwt-authentication-example-tsu2sm.stackblitz.io/user
,然后重定向回本地组件。
Kindly help me to block the user being enter into user route url with "fake-jwt-token".. 请帮助我阻止用户使用“ fake-jwt-token”进入用户路由URL。
You should have made the change in your AuthGuard
as your ''
and 'user'
routes are already protected by it. 您应该已经在
AuthGuard
进行了更改,因为您的''
和'user'
路由已受到此保护。
Change your implementation of the AuthGuard
to the following: 将
AuthGuard
的实现更改为以下内容:
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
const userFromStorage = localStorage.getItem('currentUser');
let currentUser = userFromStorage ? JSON.parse(userFromStorage) : null;
if (currentUser) {
if(currentUser.token !== "fake-jwt-token" || route.component.name !== 'UserComponent') {
return true;
} else {
this.router.navigate(['/']);
return true;
}
}
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
return false;
}
}
Here's a Working Sample StackBlitz for your ref. 这是供您参考的工作样本StackBlitz 。
Modify your Auth Guard with the same condition you have in your Home Component. 使用与家庭组件相同的条件来修改Auth Guard。
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
let currentUser = localStorage.getItem('currentUser') ? JSON.parse(localStorage.getItem('currentUser')): null;
if (currentUser && currentUser.token != "fake-jwt-token") {
// logged in and doesn't have fake token
return true;
}
// not logged in so redirect to login page with the return url
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
return false;
}
A simple and clean way to achieve this would be to have seperate guard for HomeComnponent. 一个简单而干净的方法可以为HomeComnponent提供单独的保护。
@Injectable({ providedIn: 'root' })
export class HomeGuard implements CanActivate {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
let currentUser = localStorage.getItem('currentUser');
if (currentUser) {
// logged in so return true
return true;
}
return false;
}
}
And have your routes like: 路线如下:
const appRoutes: Routes = [
{ path: '', component: HomeComponent, canActivate: [HomeGuard] },
{ path: 'login', component: LoginComponent },
{ path: 'user', component: UserComponent, canActivate: [AuthGuard] },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
See an example here: https://stackblitz.com/edit/angular-6-jwt-authentication-example-42ft5j?file=app%2F_guards%2Fhome.guard.ts 在此处查看示例: https : //stackblitz.com/edit/angular-6-jwt-authentication-example-42ft5j?file=app%2F_guards%2Fhome.guard.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.