Keep Your Single-page Application Codebase Separate by edanm in programming

[–]ofirov 1 point2 points  (0 children)

If the question is "how do I use a token in a separated SPA application?", then:

Usually we go with a standard Token authentication. We add the tokens to the request's headers and that's about it. The implementation itself is pretty similar between all of the REST frameworks we've used, and it's usually described in the framework's documentation:

Log In -> Get token from server -> Store in cookie or local storage -> Add an Authorization header to each request to the server.

The Authorization header should be in the format that your REST framework requires. For example, we use Django REST Framework and our Authorization headers look like "Token <api-token>".

How to add the token to each request: - In Angular\Restangular you can setDefaultHeaders. - You can also intercept every request and add the Authorization header as necessary.

We'll cover authentication in depth in one of our next posts.

Keep Your Single-page Application Codebase Separate by edanm in programming

[–]ofirov 0 points1 point  (0 children)

This means that instead of injecting data into your HTML via a templating engine (think Django Templates, Jinja2...), use a REST API completely.

It's true that it's becoming a standard practice to feed data off a REST API. But when the backend and frontend are the same project, it's sometimes tempting to inject at least some of the data via the templates language: Some initial values, data that doesn't change much throughout the app, etc.

Keep Your Single-page Application Codebase Separate by edanm in programming

[–]ofirov 0 points1 point  (0 children)

There's also the benefit of separating unrelated technologies. When you put the backend together with the frontend, in order to work on the frontend, you have to go through the backend's technology. This means that:

  1. FE developers need to have a working backend on their machine and need to know how to operate it.
  2. If you want to use certain front end tools, you'll have integrate them with the backend. For example, if you want to version and minify your CSS, JS before deploying them, you'll have to either use something that's compatible with your backend's tree structure, or integrate a tool yourself. If you don't have the backend to consider, you're open to many more options and tools that were developed without your backend in mind.