[Vue] Vue With Auth2

DRF Auth with Vue

SignUp Page

• views/SignUpView.vue 작성
• Server에서 정의한 field명 확인
• username, password1, passowrd2

• router/index.js 작성

• src/App.vue router-link 작성


SignUp 기능구현

• 회원가입 완료 시 응답 받을 정보 Token을 store에서 관리할 수 있도록 actions를 활용하여 요청 후, state에 저장할 로직 작성
• 다양한 컴포넌트에서 쉽게 접근 할 수 있도록 중앙 상태 저장소인 vuex에서 관리하도록
• views/SignUpView.vue 코드 작성

• store/index.js actions작성

• store/index.js mutations작성

• 요청 결과 확인/ 정상 응답 확인


토큰 관리

• 게시물 전체 조회와 달리, 인증 요청의 응답으로 받은 Token은 매번 요청하기 힘들다.
• localStorage에 token저장을 위해 vuex-persistedstate 활용
• 터미널 설치 : npm install vuex-persistedstate
• store/index.js 작성

• User 인증 정보를 localStorage에 저장하는 것은 보안상 좋은 방법은 아니기 때문에 2가지 방법을 제공한다.
1. 쿠키를 사용하여 관리
2. 로컬 저장소를 난독화 하여 관리

Login Page

• view/LoginView.vue 작성
• 회원가입 로직과 동일하게 진행하면 된다

• router/index.js 작성

• src/App.vue 작성


Login Page 기능 구현

• views/LoginView.vue 작성

• store/index.js actions작성

• store/index.js mutations 작성


isAuthenticated in Vue

• 회원가입, 로그인 요청에 대한 처리 후 state에 저장된 Token을 직접 확인하기 전까지 인증 여부 확인이 불가능하다.
• 인증 되지 않았을 시 게시글 정보를 확인할 수 없으나 이유를 알 수 없다. 로그인 여부를 확인 할 수 있는 수단이 없기때문이다.
• 로그인시 게시글을 볼 수 있게 만들예정이다.

isAuthenticated 기능 구현

• store.index.js 작성 / Token이 있으면 true 없으면 false 반환으로 로그인 여부 판별

• views/ArticleView.vue 작성

• store/index.js 작성
• store/index.js에서는 $router에 접근 할 수 없기때문에 import해줘야 한다.


로그인은 했으나 Django에서는 로그인 한 것으로 인식하지 못한다.
발급 받은 token을 요청을 보내지 않았기 때문이다.

Request with Token

Article List Read with Token

• store/index.js 작성
• headers에 Authorizations와 token 추가


Article Create with Token

• views/CreateView.vue 작성


Create Article with User

• articles/models.py 작성
• 게시글을 작성시 User정보를 포함하여 작성하도록 해야한다.
• Use정보를 Vue에서도 확인 가능하도록 정보를 제공한다.

• models.py를 수정했으니, makemigrations 와 migrate 진행
• articles/serializers.py 작성
• ArticleListSerializer에서 user는 사용자가 작성하지 않기 때문에, fields에 추가해준다.
• ArticleSerializer에서 user는 읽기 전용이다.
• username을 확인 할 수 있도록 username field 정의를 해줘야한다.

• articles/views.py 수정

• components/ArticlesListItem.vue 작성

• 결과 확인