要实现在登录时将用户重定向到上一个会话中的最后访问页面,可以使用Angular的路由守卫(Route Guards)和localStorage存储最后访问页面的URL。
首先,我们需要创建一个AuthGuard路由守卫来检查用户是否已登录。如果用户已登录,则允许访问页面,否则将用户重定向到登录页面。
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (localStorage.getItem('isLoggedin')) {
return true;
}
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
return false;
}
}
然后,在登录组件中,我们需要将用户登录成功后的重定向URL保存到localStroage中。
import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-login',
template: `
Login
`
})
export class LoginComponent {
returnUrl: string;
constructor(private route: ActivatedRoute, private router: Router) {
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}
login() {
// 登录逻辑
localStorage.setItem('isLoggedin', 'true');
this.router.navigateByUrl(this.returnUrl);
}
}
最后,在需要进行权限控制的路由上添加AuthGuard:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { LoginComponent } from './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 { }
这样,当用户未登录时,访问受保护的页面时将被重定向到登录页面,并在登录成功后自动跳转回原始访问页面。