Authentication in Angular 2
Traditional web app or full stack web app where your server render views which then are the HTML code return to the client .In traditional web app where there are client(frontend) and server(Backend) ,and we have a very strong connection between the two.Bcs it is importatnt what the users see ( the view,the html code) is dynamically generated by the server.So if you are using the server side framework,chances are your are using some kind of template engine to render out some views.So in the end the will receive the finished HTML code.
In Tradional web app ,if you want to authenticate , the client will send the authentication information(username,and password) to the server,the server will validate this information,will check in the database and if it is valid information ,server will create a session and store that session on the server,so since we have a close connetion between ther server and client ,with the server render the views anyway,the server is able to remember the client ,bcs it is communicating with the client all the time and therefore the session is stored on the server for ex. In the database and the client will get the session cookie which mainly contain the id of the session which can be send with every request where you want to access some sensible information or some resource which might be protected,so that the server can now check if the cookie is valid,if the session id is correct,if it has the session for the id stored on the server,again it happens only bcs there is a close connection between the server and the client.
But in SPA it is totlly different ,we always receive one page,and the client,angular is responsible for changing the HTML code dynamically.
In SPA we don’t have that strong connection ,we might out reach to the backend from time to time but that is not guarented a lot of request that you have to put into the quotation mark (the user makes )are handle by the client entirely for ex-if a list has to be rendered and the data for the list is already stored on the client ,it will not reach out the backend,so the HTML code will be changed by the angular that is the angular is all about.Therefor we don’t have the strong connection and besides that we may have the very generic backend,exposing a rest of API to which we can connect several web apps and mobile apps.So in this case the server will not remember who the client is?
So if you want to authenticate the client will send the Authentication information,and server will check it in the database,but if it is valid it will not create a session,bcs it does not regularly communicate with the client.it does not know the client,so it can not store a session,still server want to give the client something which allow the client (kind of inform the server on future request that the user is locked in) bcs otherwise the user would not have enter the login information on every request,where you want to access to some protect the resource,certainly not a great user experience,If you want to allow the user to create a new post,and required a username and password for that new post,and for every comment and for every like button click,So therefor the solution is that the server will send back a token,a JSON WEB Token typically which encode some information about the authenticated user,ofcourse a sensible information and is hashed certain algorithm and certain secret only known to the server,The client now has this token and if we now want to access some resource on the server which is protected for ex(creating a new post),we would simply attached that token to the request,in sense the token is generated on the server and we know the secret and the algorithm,the server is able to validate this token and randomly generated token will ofcourse not pass this test so therefore we authenticate via this token on future request bcs we attached this token and the server is able to check if the token is valid.That is the way we authenticate in the SPA