在Angular中,可以使用AuthGuard来解决登录后重定向到先前页面不起作用的问题。以下是一个示例代码:
首先,创建一个AuthGuard守卫来检查用户是否已登录:
// auth.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (this.authService.isLoggedIn()) {
return true;
} else {
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
return false;
}
}
}
在上面的代码中,AuthGuard实现了CanActivate接口,通过canActivate方法来检查用户是否已登录。如果用户已登录,则返回true,让路由继续进行。如果用户未登录,则使用Router来将用户重定向到登录页面,并将当前页面的URL作为查询参数传递给登录页面。
接下来,在需要进行登录验证的路由上使用AuthGuard守卫:
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'login', component: LoginComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上面的代码中,HomeComponent路由使用了AuthGuard守卫,只有在用户已登录的情况下才能访问该路由。
最后,在登录页面中,可以使用ActivatedRoute来获取先前页面的URL,并在登录成功后进行重定向:
// login.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
returnUrl: string;
constructor(private route: ActivatedRoute, private router: Router, private authService: AuthService) { }
ngOnInit() {
// 获取先前页面的URL
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}
login() {
// 执行登录操作
this.authService.login();
// 重定向到先前页面
this.router.navigateByUrl(this.returnUrl);
}
}
在上面的代码中,LoginComponent使用ActivatedRoute来获取先前页面的URL,并将其存储在returnUrl属性中。在登录成功后,使用Router来进行重定向到先前页面。
这样,当用户访问需要登录验证的页面时,如果未登录,则会被重定向到登录页面,并在登录成功后自动重定向回先前的页面。
上一篇:Angular登录后刷新页面