このプロジェクト例JWT 認証では、認証されたユーザーのみに特定のルートへのアクセスを許可する方法を説明します。
import { RouterConfig } from '@angular/router';
import { Home } from './home';
import { Login } from './login';
import { Signup } from './signup';
import { AuthGuard } from './common/auth.guard';
export const routes: RouterConfig = [
{ path: '', component: Login },
{ path: 'login', component: Login },
{ path: 'signup', component: Signup },
{ path: 'home', component: Home, canActivate: [AuthGuard] },
{ path: '**', component: Login },
];
さらに一歩進んで、どのユーザーロールがルートに「アクセス」できるかも示したいのですが、canActivateに引数を渡す方法がわかりませんAuthGuard (ソース)そこで、次のようなことを実現したいと思います (たとえば、管理者と従業員という 2 つの役割がある場合)。
{ path: 'home', component: Home, canActivate: [AuthGuard] },
{ path: 'users', component: AdminUsers, canActivate: [AuthGuard('Admin')] },
{ path: 'users', component: Employees, canActivate: [AuthGuard('Employee')] },
私の AuthGuard は次のようになります (userRole(= Admin または Employee または null) が AuthGuard に渡されるパラメーター):
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(userRole) {
if (!userRole || JWT.user().role == userRole) {
return true;
}
this.router.navigate(['/login']);
return false;
}
}
JWT.user.role は、JWT トークンに保存されているユーザー ロールを読み取るヘルパーです。上記のアイデアと同様のことを実行する方法はありますか?
ベストアンサー1
data
ルートのパラメータをロールで次のように設定できます
const appRoutes: Routes = [
{
path: 'account/super-secure',
component: SuperSecureComponent,
canActivate: [RoleGuard],
data: { roles: ['super-admin', 'admin'] }
}];
そして、次のようcanActivate
になりますRoleGuard
:
canActivate(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
let roles = route.data["roles"] as Array<string>;
return (roles == null || roles.indexOf("the-logged-user-role") != -1);
}
これは、すべてのロールに対してガードを作成する代わりに実行できる別の方法だと思います。必要なコードが少なく、問題が非常にうまく処理されるため、私は実際にこの方法を採用します。