Angular16的路由守卫基础使用
- 使用
ng generate guard /guard/login命令生成guard文件 - 因新版Angular取消了CanActivate的使用，改用CanActivateFn，因此使用router跳转需要通过inject的方式导入。
import { inject } from '@angular/core';
import { CanActivateFn } from '@angular/router';
import { Router } from '@angular/router';
export const loginGuard: CanActivateFn = (route, state) => {
const router = inject(Router);
const token = localStorage.getItem('token');
// 如果token有值，表示登录成功，继续跳转，否则跳转到首页
if (token) {
console.log("登陆成功");
return true;
}
console.log("登陆失败");
router.navigate(['/login']);
return false;
};
- 在路由文件中，对需要守卫的路由地址配置guard
const routes: Routes = [
{
path: 'demo',
component: demoComponent,
children: [
{
path: 'login',
component: HeroesLoginComponent
},
{
path: 'home',
component: HomeComponent,
canActivate: [loginGuard]
}
{ path: '', redirectTo: 'home', pathMatch: 'full' }
]
},
];
文章来源地址https://www.toymoban.com/news/detail-654023.html
文章来源：https://www.toymoban.com/news/detail-654023.html
到了这里，关于Angular16的路由守卫基础使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
