{"id":27264,"date":"2024-04-24T15:52:19","date_gmt":"2024-04-24T13:52:19","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=27264"},"modified":"2024-04-24T15:52:19","modified_gmt":"2024-04-24T13:52:19","slug":"reindirizzare-guardie-e-resolver-in-angular-v18","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/reindirizzare-guardie-e-resolver-in-angular-v18\/","title":{"rendered":"Reindirizzare Guardie e Resolver in Angular v18"},"content":{"rendered":"\n

Nell\u2019era odierna dello sviluppo web, creare applicazioni dinamiche e interattive \u00e8 ormai la norma. La creazione di funzionalit\u00e0 esclusive per determinati utenti, o disponibili al verificarsi di specifiche condizioni, pu\u00f2 rivelarsi una sfida molto complessa.<\/p>\n\n\n\n

Per questo motivo, Angular<\/strong> ci offre un sistema di routing basato su rotte, in inglese Routes<\/strong><\/strong>, regole e componenti, con cui possiamo progettare facilmente le nostre applicazioni.  <\/p>\n\n\n\n

In questo articolo, vedremo come proteggere le nostre Route<\/strong> reindirizzando la navigazione altrove, utilizzando inoltre una nuova funzionalit\u00e0 offerta da Angular v18<\/strong>.<\/p>\n\n\n\n

Ma prima di procedere, facciamo un breve ripasso della libreria Angular Router<\/strong>…<\/p>\n\n\n\n

\n\n\n\n

Angular Router: Guardie e Resolver<\/h2>\n\n\n\n

La libreria Angular Router<\/strong> ci permette di gestire la navigazione all’interno della nostra applicazione Angular, definendo una lista di Route<\/strong>.<\/p>\n\n\n\n

Ogni Route<\/strong> \u00e8 definita da una serie di informazioni, come il path per accedervi, il componente Angular da caricare, Route figlie<\/strong> e molto altro:<\/p>\n\n\n

import<\/span> { Route } from<\/span> '@angular\/router'<\/span>;\n<\/span><\/span>import<\/span> { MyFeatureComponent, MyFeatureGuard } from<\/span> '.\/my-feature'<\/span>;\n<\/span><\/span>\n<\/span><\/span>const<\/span> routes: Route[] = [\n<\/span><\/span>  {\n<\/span><\/mark>    path: 'my-feature'<\/span>,\n<\/span><\/mark>    component: MyFeatureComponent,\n<\/span><\/mark>    canActivate: [MyFeatureGuard],\n<\/span><\/mark>    data: {\n<\/span><\/mark>      id: \"my-feature-id\"<\/span>\n<\/span><\/mark>    }\n<\/span><\/mark>  }\n<\/span><\/mark>];\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
Possiamo proteggere una o pi\u00f9 Route<\/strong>, limitandone l’accesso o l’abbandono, in base a determinate condizioni, utilizzando delle apposite funzioni chiamate Guardie<\/strong>:<\/p>\n\n\n
import<\/span> { Route } from<\/span> '@angular\/router'<\/span>;\n<\/span><\/span>import<\/span> { MyService } from<\/span> '.\/my-feature'<\/span>;\n<\/span><\/span>\n<\/span><\/span>const<\/span> myRoute: Route = [\n<\/span><\/span>  path: 'my-feature'<\/span>,\n<\/span><\/span>  canMatch: [()<\/span> =><\/span> inject(MyService).canMatch()],\n<\/span><\/mark>  canActivate: [()<\/span> =><\/span> inject(MyService).canActivate()],\n<\/span><\/mark>  canActivateChild: [()<\/span> =><\/span> inject(MyService).canActivateChild()],\n<\/span><\/mark>  canDeactivate: [()<\/span> =><\/span> inject(MyService).canDeactivate()],\n<\/span><\/mark>];\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n\n\n\n
Articolo consigliato: La nuova funzione output di Angular<\/em><\/a><\/p>\n\n\n\n
\n\n\n\n
Esistono quattro tipi di Guardie<\/strong> Angular, ognuna con un ruolo differente:<\/p>\n\n\n\n