delon-auth-authentication-authorization
Ajouter une authentification sécurisée aux applications Angular
La construction d'une authentification sécurisée dans Angular nécessite une mise en œuvre attentive des tokens, des guards et des vérifications de permissions. Cette compétence fournit des modèles prêts à l'emploi pour la gestion JWT, le contrôle d'accès basé sur les rôles et la protection des routes utilisant la bibliothèque @delon/auth.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「delon-auth-authentication-authorization」を使用しています。 Add authentication to my Angular app with Firebase Auth
期待される結果:
- Configure @delon/auth with token_send_template and login_url
- Create AuthService with login() and logout() methods
- Set up authGuard to protect routes from unauthenticated access
- Configure automatic token injection in HTTP requests
- Implement token refresh before expiration (6000ms offset)
- Store JWT securely using DA_SERVICE_TOKEN
「delon-auth-authentication-authorization」を使用しています。 Create role-based access control for admin and user roles
期待される結果:
- Define roleGuard to check user role against route data
- Create hasRole() method in AuthService for role checking
- Protect admin routes with roleGuard and data: { role: 'admin' }
- Implement hasPermission() for fine-grained permission checks
- Sync permissions with @delon/acl for UI element control
- Handle unauthorized access with redirect to /exception/403
セキュリティ監査
安全This is a documentation-only skill containing Angular authentication patterns. All 55 static findings are false positives. The skill shows legitimate JWT handling (atob for payload decoding), Angular lazy-loading syntax (import()), template literals (backticks), and standard token storage (DA_SERVICE_TOKEN). No malicious code, scripts, or unauthorized network access is present.
リスク要因
⚡ スクリプトを含む (1)
🌐 ネットワークアクセス (1)
品質スコア
作れるもの
Ajouter la connexion à l'application Angular
Implémenter une connexion utilisateur sécurisée avec les tokens JWT, la gestion automatique des sessions et les routes protégées.
Construire un accès basé sur les rôles
Créer des permissions pour les rôles admin, utilisateur et personnalisé avec des guards de routes et des vérifications d'accès au niveau des composants.
Sécuriser la communication API
Configurer l'injection automatique de tokens dans les requêtes HTTP avec rafraîchissement avant expiration et stockage sécurisé.
これらのプロンプトを試す
Use @delon/auth to add authentication to my Angular app. Include login component with email and password, JWT token storage, and automatic token injection in HTTP headers.
Create auth guards using @delon/auth that redirect unauthenticated users to login page. Protect the dashboard and admin routes.
Implement role-based access control with @delon/auth. Create guards for admin, manager, and user roles. Show how to check permissions in components.
Configure automatic token refresh with @delon/auth. Handle expired tokens by logging out user and clearing session. Integrate with Firebase Auth token refresh.
ベストプラクティス
- Toujours utiliser HTTPS en production pour protéger la transmission des tokens
- Définir des durées d'expiration courtes pour les tokens et utiliser des tokens de rafraîchissement pour les sessions longues
- Effacer tous les états d'authentification lors de la déconnexion, y compris les tokens et les données utilisateur
回避
- Stocker les tokens dans localStorage sans chiffrement - utiliser DA_SERVICE_TOKEN à la place
- Sauter la validation des rôles sur le backend - toujours valider les permissions côté serveur
- Autoriser l'accès non authentifié aux routes protégées sans guards appropriés