[FIXED] Routing after Login in Flask / Google app engine

Issue

i am building my first Webapp with Pyhton, Flask and GAE. So far I've built the basic login system and the basic structure of the website. Now I'm wondering how to redirect my users to a different version of my website after logging in.

E.g. before login my navigation bar shows a "login" button. After login this button needs to be replaced by lets say the "logout" button. Or i need to show some pages in my navbar that weren't accessible before login.

My thoughts so far are:

1. Tag all html and css elements that need to be changed with selectors and after login modify the page with javascript according to selectors.
2. Modify routing in my python code with Flask routes
3. Configure routing in my app.yaml file for the GAE
4. Configure the jinja template for example like shown in this thread how to show logout in place of login/signup after I have logged in to my flask app? I would need to do this for every element that need to be changed and there might be cases where the layout changes after login and this solution might not be enough.

So my Question remains. Are there any best practices, what is the general approach in WebDev/Python Flask.

Solution

Since you're using Flask, you can achieve what you want with Jinja2.

Option 1

When user is logged in, your Python code will populate and return one or more variables e.g.

 LOGGED_IN_USER (the logged in user id)

 USER_EMAIl (logged in user email)

When your web page loads, it checks for any of those variables. If it's present, it displays a set of widgets such as your logout link, user name, etc and if absent, it displays another set of widget such as a login link.

Sample Code

HTML Page

 <ul class="navbar-nav ml-auto">
  <!-- If user is logged in, show their email, logout link
       and a link to access their setting -->

  {% if LOGGED_IN_USER %} 

    <li class="nav-item dropdown" >
        <a href="" class="dropdown-toggle" data-toggle="dropdown">{{USER_EMAIL}} <span class="caret"></span></a>
        <ul class="dropdown-menu" >
          <li ><a class="dropdown-item" href="{{LOG_OUT_URL}}">Logout</a></li> 
          <li ><a class="dropdown-item" href="/settings/">Settings</a></li>
        </ul>
    </li>

  {% else %}
    <!-- If user is not logged in, show a login link -->

    <li class="nav-item active">
      <a class="nav-link" href="/login/">Login</span></a>
    </li>

  {% endif %}

</ul>

Add the above code to a base template and have any page which needs to distinguish between logged-in/logged out users inherit from the template.

Option 2

Have a base template with a block for the variable content. Have separate html pages for logged in and logged out users e.g. logged_in.html, logged_out.html. These 2 html pages will inherit your base template.

Your python code will return logged_in.html if user is signed in and logged_out.html if user is not signed in.

I don't know about best practices per se. At the end of the day, you try to write less code while ensuring your code is fast and readable to you (you can understand it when you come back to it in a few months time).

Personally, I go with option 1

Answered By - NoCommandLine