angular 16 路由守卫更新

在 angular16 中守卫使用方式进行了更新,route 守卫被弃用(取消了CanActivate的使用),新增了功能性守卫(CanActivateFn),支持 inject 注入,官网提供了一个新的类型
export declare type CanDeactivateFn<T> = (component: T, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot) => Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree;

 

1.使用ng g g /guard/xxxx 命令生成guard文件

import {inject} from '@angular/core';
import {
  CanDeactivateFn,
  Router,
} from '@angular/router';

export const PermissionsGuard: CanDeactivateFn<any> = () => {
  const router = inject(Router) //注入需要使用的服务
  if (router.url === '/business-module') {
    console.log("无权限访问,请重新登录");
    router.navigate(['/login']);
    return false
  } else {
    return true
  }
}

2.在路由文件中,使用方式与angular 其他版本无差别,无需关注

const routes: Routes = [
  {
    path: 'business-module',
    component: PermissionsComponent,
    canActivate: [PermissionsGuard] //使用方式
  },
];

 

posted @ 2024-01-25 09:13  攀上顶峰  阅读(75)  评论(0编辑  收藏  举报