Framework/Django

로그인 이후 기능 다듬기 작업

JM Lee 2023. 4. 4. 14:06
728x90

로그인에는 성공했다. 그건 좋은데...

로그인을 하면

이 넓은 창에 사용자 닉네임 하나만 덩그러니 있다. 이럴거면 왜 로그인했나 싶겠지.

그래서 여기에 기능을 추가해보기로 했다.


html 파일 적용

우선 코드스니펫에 있는 html파일을 templates 폴더에 넣었다. 이제 이것을 적용해야겠지.

 

이번에 만들 앱은 /tweets/다.

그렇기 때문에 tweet에 views.py와 urls.py를 만들고

# tweet/urls.py
from django.urls import path
from . import views

urlpatterns = [
path('', views.home, name='home'), # 127.0.0.1:8000 user/views.py 폴더의 home 함수 연결
path('tweet/', views.tweet, name='tweet') # 127.0.0.1:8000/tweet views.py 폴더의 tweet 함수 연결
]

다음과 같은 url과

from django.shortcuts import render, redirect

# Create your views here.

def home(request):
user = request.user.is_authenticated
# 유저가 로그인 되어 있는지 확인 가능
if user:
# 사용자가 있으면
return redirect('/tweet')
# 트윗으로 이동
else:
# 없으면
return redirect('/sign-in') # 어림없지

def tweet(request):
if request.method == 'GET':
# method get일 경우
return render(request, 'tweet/home.html')

다음과 같은 views를 만들어준다. 그럼 간단하게 마무리.

일 리가 없다.

폴더의 모든 url을 종합하는 메인 urls.py도 수정해줘야 한다. urlpatterns에 가서 tweet 연결 내용을 추가!

urlpatterns = [
path('admin/', admin.site.urls),
path('test/', views.base_response, name='first_test'),
path('first/', views.first_view, name='first_view'),
path('', include('user.urls')),
path('', include('tweet.urls')),
]

그럼 다음과 같이 html이 적용됨


클라이언트(html) 기능 다듬기

생뚱맞은 이 창에 나의 이름과 한 줄 인사말을 적어보려고 한다.

html로 가서 다음과 같이 수정해준다.

<div class="card-body">
<h5 class="card-title">{{ user.username }}</h5>
<p class="card-text"> {{ user.bio }} </p>

</div>

{{ }}는 templates 용어로, 이 안에 user의 username과 bio를 가져오겠다는 의미이다.

그대로 실현하면,

아까 대충 친 게 이렇게 스노우볼이 되네. 이렇게 나온다.

 

그 다음에는 상단 네비게이션 바를 수정해 보려고 한다.

로그인을 했는데 여전히 이 창이 떠 있으니 바꿔줘야겠지?

네비게이션 바를 담당한 base.html로 간다.

<form class="form-inline my-2 my-lg-0">
{% if not user.is_authenticated %}
{# user가 인증 or 로그인되지 않은 경우#}
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/sign-in"> Sign In <span class="sr-only"></span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/sign-up"> Sign Up <span class="sr-only"></span></a>
</li>
</ul>
{% else %}
{# 로그인 된 경우#}
{{ user.username }} 님 반갑습니다!
{% endif %}
</form>

그리고 마찬가지로 다음과 같이 만들어주는데,

html에서 조건문도 형성할 수가 있다. 이게 바로 장고의 능력인 건지..파이썬 고유 능력인 건지..

{% if %}문을 형성하고 마지막엔 {% endif %}만 설정해주면 조건문이 형성된다.

이렇게 하면 로그인 할 시에 아래 사진처럼 바뀐다.


추가 로그인 기능 설정

로그인이 되어있지 않을 때도 /tweet을 치면 tweet 창으로 넘어가기 때문에,

로그인이 안 되어 있을 때는 로그인 창으로 가게끔 해야 한다.

이것은 tweet 함수를 손 봐야 하므로, 다음과 같이 조건문 식으로 처리한다.

def tweet(request):
if request.method == 'GET':
# method get일 경우
user = request.user.is_authenticated

if user:
return render(request, 'tweet/home.html')
else:
return redirect('/sign-in')

 

같은 방식으로,

로그인이 된 상태에서 회원가입 창으로 이동하지 않게끔 하는 방법이 있다.

이 역시 추적해보면 sign_up_view 함수를 손 봐야 함을 알게 되므로, 조건문 식으로 처리한다.

def sign_up_view(request):
if request.method == 'GET': # GET 메서드로 요청이 들어 올 경우(되돌리기)
user = request.user.is_authenticated
if user:
return redirect('/')
else:
return render(request, 'user/signup.html') # 화면 보여주기

 

로그인이 되어있을 때 로그인 창으로 이동하지 않는 법 역시 마찬가지다.

elif request.method == 'GET':
user = request.user.is_authenticated
if user:
return redirect('/')
else:
return render(request, 'user/signin.html')

로그아웃 기능 만들기

그럼 이제 로그아웃을 해야 다른 아이디로 로그인을 할 수 있을 것이다.

 

이를 위해 먼저 user/views에 로그아웃 함수를 설정했다.

@login_required
# 사용자가 꼭 로그인되어 있을 때만 적용 가능한 함수
def logout(request):
auth.logout(request)
return redirect('/')

auth.logout(request)는 장고에서 쓸 수 있는 함수이기 때문에

장고에서 이 함수를  가져온다는 것을 명시해야 한다.

from django.contrib.auth.decorators import login_required
# 로그아웃 기능 가져오기

그리고 이것을 url 연결해야 하기 때문에 urlpatterns에 또 추가를 해준다.

urlpatterns = [
path('sign-up/', views.sign_up_view, name='sign-up'),
path('sign-in/', views.sign_in_view, name='sign-in'),
path('logout/', views.logout, name='logout'),
]

추가가 끝났다면 html을 위에서 한 것처럼 손 봐주면 완성!

{% else %}
{# 로그인 된 경우#}
<ul class="navbar-nav mr-auto">
<li class="nav-item disabled">
<span class="nav-link">
{{ user.username }} 님 반갑습니다!
</span>
</li>
<li class="nav-item active">
<a class="nav-link" href="/logout"> 로그아웃 </a>
</li>
</ul>

이상 로그인 기능 다채롭게 구현하기 완료