CODEWITHSUNDEEP
javascriptjquerypythonhttp-redirectflask
David
David

Reputation: 465

Flask's redirect(url_for('profile')) only loads HTML on Console, but does not actually redirect

I am using JavaScript along my Flask application to handle some user input in a transparent way. I have the following route to handle users logging into the website:

@app.route('/login/', methods=['GET', 'POST'])
def login_page():
    if request.method == 'GET':
        return render_template('login.html')
    elif request.method == 'POST':
        user = []
        user.append(float(request.form['orgid']))
        passwd = generate_password_hash(request.form['passwd'])
        user.append(passwd)
        pw_hash = cursor.callfunc("IRUD.READ_PASSWORD_HASH", cx_Oracle.STRING, user)
        if check_password_hash(pw_hash, request.form['passwd']):
            session['userid'] = cursor.callfunc("IRUD.READ_USER_ID", cx_Oracle.NUMBER, [float(request.form['orgid'])])
            return redirect(url_for('profile'))
        else:
            return redirect(url_for('login_error'))

In login.html, the user fills in some information to log in and that is handled with JavaScript with the following code:

$(document).ready(function(){
    $('#btnLogin').click(loginUser);
  });


function loginUser(){
    var oData={};
  oData.orgid=$('#matricula').val();
  oData.passwd=$('#passwd').val();

  $.ajax({
    url: '/login/',
    data: oData,
    type: 'POST',
    success: function(response){
      console.log('Success - Login!');
      console.log(response);
    },
    error: function(error){
      console.log('Error - Login!');
      console.log(error);
    }
  });

If the login is successful I should get redirected to a URL /profile handled by a profile() method. However, instead, the HTML of this page appears in my web browser's console, with no redirection at all.

I have read some posts on this site about how it has to do with using jQuery, however, I have not found an answer that solves my problem.

How can I properly redirect my users to another web page after doing a successful log in?

I will thank you for any help you can provide.

UPDATE

It is worth noting that if I change return redirect(url_for('profile')) for a simpler return render_template('profile.html'), the HTML still just loads in the console.

UPDATE 2

Alternatively, I think another option is to handle all of this page just with Flask, without any JavaScript controller. My Python code looks like this now:

@app.route('/login/', methods=['GET', 'POST'])
def login_page():
    if request.method == 'GET':
        return render_template('login.html')
    elif request.method == 'POST':
        user = []
        user.append(float(request.form['orgid']))
        passwd = generate_password_hash(request.form['passwd'])
        user.append(passwd)
        pw_hash = cursor.callfunc("IRUD.READ_PASSWORD_HASH", cx_Oracle.STRING, user)
        if check_password_hash(pw_hash, request.form['passwd']):
            session['userid'] = cursor.callfunc("IRUD.READ_USER_ID", cx_Oracle.NUMBER, [float(request.form['orgid'])])
            return render_template('profile.html', name=session['userid'])
        else:
            return render_template('error.html')

However, when I do this I run into the following error: POST http://127.0.0.1:5000/login/ 400 (BAD REQUEST)

Upvotes: 2

Views: 1024

Answers (1)

Jemima
Jemima

Reputation: 71

from flask import jsonify
if check_password_hash(pw_hash, request.form['passwd']):
        return jsonify(dict(redirect='profile.html', name=session['userid']))
    else:
        return jsonify(dict(redirect='error.html'))

Then in your Javascript file:

success: function(response) {
    if (response.redirect){
        window.location.href = response.redirect;
      }
   }

I was having the same problem and this is the solution I've arrived at. I think it can be optimized though.

Upvotes: 2

Related Questions