Noscript

Once you know how to read cookies in the Angular Universal app, it's time to learn how to set them up. In this lesson, you will make your application fully functional for users whose browser doesn't support JavaScript at all.

Working With Cookies in Angular#

Armed with the knowledge about reading cookies and dealing with HTTP requests inside Angular Sandbox, you can enhance your application to provide the full functionality for users who have disabled JavaScript in their browsers.

User login#

Let's start from adjusting the login page functionality. First step is to add action and method attributes to the <form> entity; next you should add name attribute to both form fields. Edit src/app/login/login.component.ts file:

Now you need to handle form-data on the back-end side (api.ts). Replace the existing api.post('/login', () => {}) entry with the following code:

Since now, verifying user credentials and setting up cookie actions are delegated to the authenticate function. Thanks to that, you can inject a reference to this function into the Angular Sandbox and reuse it there. Import authenticate function inside the server.ts file:

and register new route which handles submitted form and provides the authenticate method to the Angular sandbox:

You need also to enable Node.js application to parse form data, add the following ipmort in the server.ts:

and apply it on the server object:

Inject the authenticate method inside src/app/user-server.service.ts together with the RESPONSE token from the @nguniversal/express-engine/tokens:

and implement the authentication logic:

 

This page is a preview of The newline Guide to Angular Universal

No discussions yet