How to work with sessions in Vue and Flask?

Question

You know, web applications needs sessions or cookies to authentication. I trying to build web application with Vue.JS and Flask microframework for example ERP or CRM.

I'm confused. How can I work with sessions? Let's think we have a code like this in the Flask:

import os
from flask import Flask, request, jsonify, abort, session

app = Flask(__name__)
app.config['SECRET_KEY'] = os.getenv('SECRET_KEY') or \
    'e5ac358c-f0bf-11e5-9e39-d3b532c10a28'

@app.route('/login', methods=['POST'])
def user_login():
    user = request.form['user']
    session['isLogged'] = True
    return jsonify({'status': session['isLogged']})

@app.route('/user-info')
def user_info():
    if 'isLogged' in session:
        return jsonify({'user': 'ali'})
    else:
        return jsonify({'error': 'Authentication error'})

and our front-end codes should be like this:

  mounted() {
    this.checkIsLogged();
  },
  methods: {
    checkIsLogged() {
      fetch('http://127.0.0.1:5000/user-info', {
        mode: 'no-cors',
        method: 'GET',
      }).then((resp) => {
        return resp;
      }).then((obj) => {
        if(obj.user) {
          this.status = true
        }
      })
    },
    login() {
      let frmData = new FormData(document.querySelector("#frmLogin"));

      fetch('http://127.0.0.1:5000/login', {
        mode: 'no-cors',
        method: 'POST',
        body: frmData,
      }).then((resp) => {
        return resp;
      }).then((obj) => {
        this.status = obj.status
      })
    }
  }

Everything is normal until I refresh the page. When I refresh the page, I lose the sessions.

Server-side sessions are important for many reasons. If I use localStore or something like that how could be secure I have no idea.

I need some help who worked on similar projects. You can give me suggestions. Because I never worked similar projects.

Other stuff I've read on this topic:

• Single page application with HttpOnly cookie-based authentication and session management
• SPA best practices for authentication and session management

I'm still confused to about what can I do.

Answer 1

Session handling is something your SPA doesn't really care much about. The session is between the user-agent (browser) and the server. Your vue application doesn't have much to do with it. That's not to say you can't do something wrong, but usually the issue is not with your front end.

That being said it's tough do give an answer to this question because we don't really know what's wrong. What I can do is give you instructions on how you can diagnose this kind of problem. During this diagnosis you'll figure out where the actual issue is and, at least for me, it usually becomes obvious what I need to do.

Step 1)

Use some low level HTTP tool to check the Server response (personally I use curl or Postman when lazy). Send the login request to the server and take a look at the response headers. When the login is successful you should have a header "Set-Cookie", usually with a content of a "sessionid" or whatever key you're using for sessions. If you don't see a "Set-Cookie" one of the following is true:

• Your server did not start a session and thus did not send a session cookie to the client
• there's a proxy/firewall/anti-ad- or tracking plugin somewhere filtering out Cookies

If you see the Set-Cookie Header continue with Step 2, otherwise check the manual in regards to sessions in your chosen backend technology.

Step 2)

Thankfully most modern browsers have a developer console which allows you to do two things: 1) Check your HTTP request headers, body and response headers and body 2) Take a look at stored cookies

Using the first feature (in Chrome this would be under the "Network" tab in the developer console) diagnose the request and response. To do so you need to have the developer console open while performing the login in your app. Check the response of the login, it should contain the Set-Cookie if the login was successful. If the cookie is not present your server doesn't send it, probably for security reasons (cross-origin policies).

If it is present, the cookie must now be present in the cookie store. In chrome developer console, go to the "Application" tab, expand Cookies from the left menu and take a look at the hosts for which cookies are present. There should be a cookie present which was set in the step before. If not the browser didn't accept the cookie. This usually happens when your cookie is set for a certain domain or path, which isn't the correct one. In such a case you can try to set the domain and/or path to an empty or the correct value (in case of the path a "/"). If your cookie is present, go to step 3

Step 3)

Remember when I said the app has nothing to do with the session. Every request you send either with ajax or simply entering a valid URL in the browser sends all cookies present for this host in the request headers. That is unless you actively prevent whatever library you're using to do so. If your request doesn't contain the session cookie one of the following is usually true:

• the usage of your http library actively prevents sending of cookies
• you're sending a correct request but the cookie-domain/path doesn't match the request host/path and is thus not sent along
• your cookie is super shortlived and has already expired

If your cookie is sent correctly then your sessions handling should work unless your server doesn't remember that session or starts a new session regardless of an existing session.

I realise this question is quite old and this extensive answer comes way too late, however someone with similar problems may be able to profit from it.