I have been reading posts on creating SPAs using vanilla Javascript but I have not found any tutorials on how to Authenticate and Authorize users without using frameworks like Angular or others.
Currently the way that I authenticate and authorize users is I make an AJAX call to a DotNet Web API function which takes name and password as inputs. This API queries a database to check for the existence and role of the user. If the user exists, data which is appropriate for his/her role is grabbed and returned to the calling function on the front-end to be used to populate an empty DIV. This DIV which acts as the current web page is the only one visible while others are hidden using CSS display property of none.
The problem that I see with this approach is that it could be slow to render the page depending on the amount and type of content to be returned and the network connection speed. Also book marking a page could be problematic.
I would like to know if it’s even possible to Authenticate and Authorize users without using frameworks. If there is a way, I would like to know the easiest option where the learning curve isn’t too steep.
Hi @liagapi555, this is of course something to keep an eye on for any web page – be it static or an SPA. Actually, with an SPA the response payload (other than for the initial page load) should generally be somewhat smaller in that you only need to serve the data, rather than the complete markup for the next page. Mind you, either is usually neglectable compared to your images and other media resources.
This can be solved with client side routing – in its simplest form just using fragment identifiers, such as my-page.com/#login and my-page.com/#profile. You can also mimic more complex URLs this way, e.g. my-page.com/#/bands/the-ramones; and with an appropriate server configuration you can leave out the # and just redirect all requests to the index page.
Well eventually those frameworks are all just JS, so it’s certainly possible… I’m not quite sure how the problems you’re describing are related to user authentication in particular though.
When I mention Authentication and Authorization, what I’m referring to is securing your web contents. Basically a user should not be able to navigate to any page that he’s not authorized to see unless and until he logs in.
I don’t see how this is possible without server side scripts using something like ASP.Net, PHP, etc. Javascript alone cannot provide these features. I have not looked into node.js to see if it can provide such features but if it can It would be great.
Well it isn’t. No client side code can provide actual authentication; ultimately you always have to ask for permission on the server side. Using a framework can just simplify that process, as for instance with angular’s route guards.
Yes it certainly can – you might check out passport for a popular solution, but there are also tutorials how to write one yourself if you feel inclined to do so.