angular 15 对指定页面进行访问限制
原本的访问控制是通过实现 CanActivate 接口完成的，当时并不支持 Observable 异步返回判断结果，现在终于实现了！
例如：需要登录才能访问
/**
* 需要登录才能访问的页面控制
* @param _
* @param state
* @returns
*/
export const CanActivateViaAuthGuard: CanActivateFn = (_, state) => {
return inject(AuthService).canActivate(state.url);
};
// 使用注册到路由上
const routes: Routes = [
{
path: 'finance',
canActivate: [CanActivateViaAuthGuard],
component: HomeComponent
},
]
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BackendModule {}例如：需要登录且需要相关权限才能访问
/**
* 需要有某种权限才能访问的页面控制
* @param roles
* @returns
*/
export function CanActivateAuthRole(...roles: string[]): CanActivateFn {
return (_, state) => {
return inject(AuthService).canActivate(state.url, ...roles);
}
}
// 使用注册到路由上
const routes: Routes = [
{
path: 'finance',
canActivate: [CanActivateAuthRole('admin')],
component: HomeComponent
},
]
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class BackendModule {}AuthService 实现
@Injectable()
export class AuthService {
constructor(
// 使用 ngrx-store 保存全局数据的
private store: Store<AppState>,
// 生成登录网址
private router: Router,
// 消息提示组件
private toastrService: DialogService) {}
public canActivate(uri: string, ...roles: string[]) {
return this.store
.select(selectAuth)
.pipe(map(res => {
/*
* res: {
guest: boolean, // 是否是游客状态
roles: string[], // 保存当前用户的所有权限
}
*/
if (res.guest) {
// 跳转到登录页面，并指定登录后的返回网址
return this.router.createUrlTree(['/auth'], {queryParams: {redirect_uri: uri}});
}
if (roles.length === 0) {
return true;
}
if (res.roles) {
for (const item of roles) {
if (res.roles.indexOf(item)) {
return true;
}
}
}
this.toastrService.error('无权限访问');
return false;
}));
}
}完整代码
转载请保留原文链接： https://zodream.cn/blog/id/240.html