将Nuxt前端与Flask后端集成的最佳方法

Question

I am trying to integrate a front-end dashboard built with nuxt with an API back-end built with Flask. Both the front and the back must run on the same local server on the client's closed network. The client wishes to use Flask-Security in order to authenticate users, but this is where the problems start. Originally, the client wanted to serve static pages in the flask-security templates folder.

However, because the pages themselves need data from the API in order to load (using nuxt's asyncData), I ran into problems when trying to deploy the front-end files using "npm run generate"/"npm run build" and the only way I could get the front to work together with the back was by deploying the front-end in server-side rendering and running it locally (npm run start) on a different localhost port than the one the API is running on. So far its been working, but the problem is that now the client wishes to add login to the system, using Flask-Security, but I am running into a brick wall trying to do that...

So, I have a few questions -

1 - What do you think about would be the ideal way of going about this? can it be done?

2 - Could you suggest a different method/setting to integrate the front and the back? What would be the best practices in this situation ? Should the login be done using Flask or using something else? at the front-end or at the back?

3 - Would you recommend a different login method? (just as a note, the front-end hasn't been run with a vue store so far, and I think that is required for authentication through nuxt...)

Answer 1

I use Vue (not SSR) and am actively maintaining a fork of flask-security - primarily to improve it for use with modern Single page applications. I have a writeup for using my fork with single page applications here: https://flask-security-too.readthedocs.io/en/latest/spa.html

But to answer your question directly - I would separate out your nuxt/vue front end from your backend completely - they can and should be developed and packaged separately - even if they all run in the same container. My dockerfile downloads my UI repo, runs npm build and copies the entire results to /var/www. I use nginx to serve the static content, and have it route /api to my flask/uwgi backend. The UI communicates via JSON API only - no forms whatsoever. So you will be using Flask-Security for managing users (register etc) and for its endpoint/view authorization protections - but not Flask-Securitys html forms.

For development - where there is no nginx - there are some tricks needed to make sure redirects and such properly bounce between your backend that is running on a different port (locally) than your front end. That 'trick' is a new configuration variable in Flask-Security in my fork called: SECURITY_REDIRECT_HOST which will rewrite redirect URLs to a different port.