このパートでは、TOP画面上にログインユーザ名を表示する機能と、ログアウトボタンの機能を実装していきます。

本パートの目標物

本パートでは、DjangoのWEBアプリに以下の機能を実装します。

Copied!
・ログインユーザ名の表示機能実装
・ログアウトボタン機能実装

具体的には以下の流れで実装を行います。

目標物を作成するまでの流れ

Copied!
1. ログインユーザ名の表示設定
2. ログアウトボタンの設定

それでは作成手順を説明していきます。

1. ログインユーザ名の表示設定

まず、ログイン後のTOP画面上部にログインユーザ名が表示されるようにbase.htmlの設定を一部変更します。

python
123456
      
Copied!
../tutorial
       ├── templates    
       |    └── pdfmr
       |   　　　 └── base.html   #変更するファイル
       |   　　　 └── top.html    
    

base.htmlの内容を以下の通り変更してください。

変更前

python
12345678910111213
             
Copied!
<div class="navbar-custom-menu">
    <ul class="nav navbar-nav">
        <!-- Control Sidebar Toggle Button -->
        <li>
            <a class="nav-link">ユーザ名：</a>
        </li>     
        <li>
            <a class="nav-link" href="">
                <i class="fa fa-fw fa-sign-out"></i>ログアウト</a>
        </li>
    </ul>
</div>

変更後

python
1234567891011121314151617181920212223242526
                          
Copied!
<div class="navbar-custom-menu">
    <ul class="nav navbar-nav">
        <!-- Control Sidebar Toggle Button -->
        
        <!--========== ここから以下を追加 =========== -->
        {% if user.is_authenticated %}
        <!--========== ここまでを追加 =============== -->
        
        <li>
            
            <!--========== ここから以下を修正 =============== -->
            <a class="nav-link">ユーザ名：{{ user.get_username }}</a>
            <!--========== ここまでを修正 =============== -->
        
        </li>     
        <li>
            <a class="nav-link" href="">
                <i class="fa fa-fw fa-sign-out"></i>ログアウト</a>
        </li>
        
        <!--========== ここから以下を追加 =========== -->
        {% endif %}
        <!--========== ここまでを追加 =============== -->
    
    </ul>
</div>

コードの解説

{% if user.is_authenticated %} 〜〜〜 {% endif %} で囲んだ箇所（ユーザ名、ログアウトボタンの部分）が、ログイン中のユーザーにのみ表示されます。

ユーザーが認証済みであることを確認したい場合は、上記のようにuserオブジェクトのis_authenticatedの値がTrueであることを確認すればOKです。

ちなみに、userオブジェクトはリクエスト（request)オブジェクト内に格納されています。

少し思い出していただきたいのですが、pdfmr\views.pyで定義した以下のtop関数のreturnでrequestオブジェクトをtop.htmlに渡しています。
そのため、テンプレートファイル（top.html)側でuser.<属性名>という形でuserオブジェクトの値をチェックできます。

python
12
  
Copied!
def top(request):
    return render(request, 'pdfmr/top.html')

【補足】
userオブジェクトには認証ユーザに関する情報がいくつか格納されています。
例えば以下のような値が格納されています。

Copied!
user.is_authenticated ・・・ユーザが認証済みの場合Trueを返す。
user.id・・・認証済みユーザのID番号
user.username・・・認証済みユーザのユーザ名 (user.get_usernameも同じ）

上記の補足でも少しでてきましたが、以下の通りテンプレートファイル上で{{ user.get_username }}と記載することで認証済みのユーザ名を表示させることができます。

python
1
 
Copied!
<a class="nav-link">ユーザ名：{{ user.get_username }}</a>

TOP画面のページを更新して以下の通りログオンユーザ名が表示されればOKです。

以上で、ログインユーザ名の表示設定は完了です。

2. ログアウトボタンの設定

最後に、ログアウトボタンを押した際にログアウト処理を実行してログオンページに遷移する部分を実装します。

先ほどと同様にbase.htmlを変更していきます。

python
123456
      
Copied!
../tutorial
       ├── templates    
       |    └── pdfmr
       |   　　　 └── base.html   #変更するファイル
       |   　　　 └── top.html    
    

base.htmlの内容を以下の通り変更してください。

変更前

python
1234
    
Copied!
<li>
    <a class="nav-link" href="">
    <i class="fa fa-fw fa-sign-out"></i>ログアウト</a>
</li>

変更後

python
1234567
       
Copied!
<li>

    <!--========== ここから以下を変更 =========== -->
    <a class="nav-link" href="{% url 'accounts:logout' %}">
    <!--========== ここまでの変更 =========== -->
    <i class="fa fa-fw fa-sign-out"></i>ログアウト</a>
</li>

コードの解説

変更箇所は1か所で、ログオンボタンのhrefにログアウト用のURLパターンを設定するだけです。

ここで再度思い出していただきたいのですが、ログアウト処理はaccouts\views.py内のLogoutクラスで定義しました。

以下の部分ですね。

python
123
   
Copied!
class Logout(LoginRequiredMixin, LogoutView):
    """ログアウトページ"""
    template_name = 'accounts/login.html'

上記Logoutクラスを呼び出すにはaccounts\urls.py内で定義したURLパターン名称logoutを呼び出せばよいのです。
名前空間名としてaccountsを設定しているため、hrefには"{% url 'accounts:logout' %}"と定義します。

python
1234567
       
Copied!
app_name ='accounts'

urlpatterns =[
    path('login/', views.Login.as_view(), name='login'),
    path('logout/', views.Logout.as_view(), name='logout'), #　←これ！

]

以上で、本パートは完了です。

最後にログアウトボタンを押してログアウト（ログイン画面に戻る）できることを確認しておきましょう。

お疲れさまでした。