Angular 2 and Asp.Net 5 mvc 6 - authentication practices

Question

I'm creating my first spa application using angular 2 and asp.net 5 mvc 6. It will be simple app using cookie-based authentication. I know i should use tokens but I don't need to pass authentication to other applications so cookies should be enough. I also decide to use permission based authorization. Db schema looks like:

User ---> Role <----> Permission

My api return code 401 when user is not authenticated and 403 when he is authenticated but he don't have permissions to access data

I already implemented this part: schema

But now I don't know how to handle with user credentials and permissions in client and I have some questions. I just need some guidance.

1. How to store user data in spa after authentication when session is set ? There are many options. I can call api each time i need user data e.g. username, email or I can fetch it once and store in encrypted cookie or localStorage.

2. The same with user permissions. I want to manage displaying of buttons in template or links in menu etc. due to current user permissions using directives like *ngIf. There also I can store user permissions in localStorage or call api each time route change to get json like:

   {  
       showEditButton: true,
       showHeader: false 
   }
   

Answer 1

This project handles all of the above: https://github.com/chsakell/aspnet5-angular2-typescript Well worth a look.

Answer 2

I store this info in local storage of browser. I save user info (username) object in local storage when user is logging, and clear it when I get Unauthorized responce from api, or when user is log out. And I recommend you to use tokens for SPA. SPA should be stateless. Token auth for api is not only for external providers.