This repository contains Vue.js template acting like authentication gate for your system. It is based on several Vue dependencies listed below. Feel free to use and customise this template on your own.

❤️ Enjoy it !

There isn't much of a nuclear science behind. Protected resources area accessed using JWT based accessToken. To get the token, perform Basic HTTP auth POST on /login. Then, use the token to access protected resources by glueing it to the URL itself.
More secure authentication methods are intentionally omitted to lower the complexity of this example. For your PRODUCTION needs - DON'T USE THIS APPROACH - and better come up with more secure solution (use OAuth or similar techniques).

Template utilises following frameworks:

• Vue - well you know it...
• vue-router - for managing routes
• Vuex - for state handling
• axios - for customising HTTP requests
• vee-validate - for form validation
• bootstrap4 and other visual goodies (fontawesome etc...)
• custom built HTTP companion server in Python (yeah ⭐️ would be nice !)
  • you can further customise 👆 server to serve your needs 😉

Rest of the template is good ol' JS in it's purest form.

Before all, make sure you have Vue CLI installed.
Use -g option to install it into global package scope. Then:

$> npm install #wait for installation to complete

For the template to work properly, it needs some sort of HTTP server processing the requests. I've used custom built HTTP server written in Python. Check out the repo here: https://github.com/vexy/flask-auth-template (oh dear it's vexy again 😑)

To run the server after installation and setup, just:
(make sure to checkout the docs for server installation and setup)

# run the server in this fancy way
$ . start.sh

If you're having problems with installation or setup, google the stuff first, then if you feel desperate - fire an issue here.

First, make sure your HTTP server is up and running. Then, run npm run serve.
(by default just point your browser to http://localhost:8000 or :8080)

To create production ready source, run npm run build. Optimised output will be stored in dist/ folder.

This example was inspired by: https://github.com/websanova/vue-auth

Copyright © 2020 Veljko Tekelerović
MIT Licence