angular 15 对指定页面进行访问限制-zodream梦想开源/个人编...

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 {}

1234567891011121314151617181920212223242526

例如：需要登录且需要相关权限才能访问

/**
 * 需要有某种权限才能访问的页面控制
 * @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 {}

12345678910111213141516171819202122232425

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;
        }));
    }
}

123456789101112131415161718192021222324252627282930313233343536373839

完整代码

CanActivate

AuthService

Store

转载请保留原文链接： https://zodream.cn/blog/id/240.html

推荐订阅源