Nedan följer en kort introduktion till hur du kan implementera autentisering och behörighetskontroll i en AngularJS applikation.
I den enklaste typen av autentisering (basic authentication) skickas användarnamn och lösenord med vid varje serveranrop. Detta är mindre säkert, eftersom risken för avlyssning är större.
Istället bör användaruppgifterna skickas en gång till servern. Servern validerar uppgifterna och returnerar en nyckel (token). Nyckeln sparas på klienten. Tidigare sparades nyckeln ofta i en cookie. Undvik cookies i nya applikationer, utan välj i stället local storage. Med local storage har du större kontroll över vad applikationen lagrar på klienten, samt kan lagra mer data. Token måste fortfarande skickas med varje anrop till servern, detta gör du genom att lägga till en HTTP auth header på alla utgående requests från applikationen.
När du skickar användaruppgifter till servern använd POST istället för GET. Vid ett GET-anrop ligger all data i adressfältet, och oftast loggas hela adressen på webbservrar etc. Med POST-anrop minskar risken för avlyssning.
I AngularJS finns interceptors, en typ av filter som fångar upp in- och utgående data. Med hjälp av interceptors kan du till exempel bygga generell loggning i din applikation. I vårt fall måste token skickas med varje anrop för att servern ska ge åtkomst till skyddad data. Med en http interceptor kan du enkelt läsa upp token från local storage och lägga till auth headern för alla serveranrop.
Skickar du med en token och servern svarar med 401 Unauthorized betyder det i regel att din session har gått ut och att du måste logga in igen. Här kan vi göra en interceptor som känner av om ett anrop inte släpps igenom och sedan tvingar användaren att logga in på nytt.
För en bättre användarupplevelse är det bra att ofta kontrollera att en token finns på klienten. Detta kan göras vid en navigering eller genom att sätta en $timeout som gör det var 10:e minut. Finns ingen giltig token kan du tvinga användaren att logga in på nytt, så att användaren inte förlorar arbete och tid.
I bilagan till denna artikel går det att ladda ned ett projekt med exempelkod.
