ログイン認証に成功すると最上部にログインユーザ名とログアウトが表示されるようにする

認証画面

認証後の画面

認証に成功すると、最上部のブロックの中に"ユーザ名"と"ログアウト"のリンクが表示されるようになる

環境

macOSX Monterey
Python 3.10.6

ファイル構成

APP 
  ├─ static
  |    └─ style.css
  ├─ templates
  |      ├─ index.html
  |      └─ login.html
  └─ app.py

APPファイル

app.py

# save this as app.py
from flask import Flask, render_template, session, request, redirect, url_for
import os


app = Flask(__name__)

app.secret_key = os.urandom(21)
id_pwd = {'mash': 'mash123', 'cannu': 'cannu123'}


# index page
@app.route('/')
def index():
    if session.get('login'):
        user_name = request.args.get('uname')
        return render_template('index.html', user_name=user_name)
    else:
        return redirect(url_for('login'))

# login
@app.route('/login')
def login():
    return render_template('login.html')


# locgin check
@app.route('/logincheck', methods=['POST'])
def logincheck():
    user_id = request.form['user_id']
    password = request.form['password']

    if user_id in id_pwd:
        if password == id_pwd[user_id]:
            session['login'] = True
        else:
            session['login'] = False
    else:
        session['login'] = False
    
    if session['login']:
        return redirect(url_for('index', uname=user_id))
    else:
        return redirect(url_for('login'))


# logout
@app.route('/logout')
def logout():
    session.pop('login', None)
    return redirect(url_for('index'))


if __name__ == '__main__':
    app.run(debug=True)

ポイント

# index page

user_name = request.args.get('uname') とすることで下記のクエストリングから値を取り込む

# login check

認証後にurl_forでindexを返すときに、引数として uname=user_id を渡している。
引数はクエストリングとして渡される、"127.0.0.1:5000/?uname=(user_id)"

INDEXファイル

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Top Page</title>
        <link rel="stylesheet" href="static/style.css">
    </head>

    <body>
        {% if user_name %}
        <div class="header">
            <div class="header-username">
                {{ user_name }}
                <a href="{{ url_for('logout')}}">Logout</a>
            </div>
        </div>
        {% endif %}

        <div class="container">
            <h2>Flask Web App</h2>

            <a href="/logout">Logout</a>
        </div>
    </body>
</html>

ポイント
user_name引数の受けとりの結果次第で、headerブロックが表示・非表示の挙動が変化する

{% if user_name %}
xxxx
{% endif %}

CSSファイル

style.css

body {
    width: 600px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    font-family: system-ui, sans-serif;
}

.header {
    background-color: lightskyblue;
    color: black;
    height: 20px;
    padding: 10px, 5px;
}

.header-username {
    float: right;
    font-size: 10px;
    margin: 5px 10px;
}

.container {
    background-color: lightblue;
    height: auto;
    margin-top: 5px;
    padding: 20px 20px;
}