Merge pull request #187 from TaskFlow-CLAP/CLAP-423

CLAP-423 초기 비밀번호 재설정 불가능 오류 수정

Author: seorang42

src/api/auth.ts

@@ -25,17 +25,25 @@ export const postLogin = async (nickName: string, password: string) => {
     path: '/',
     sameSite: 'strict'
   })
-  Cookies.set('refreshToken', response.data.refreshToken, {
-    path: '/',
-    sameSite: 'strict'
-  })
+  if (response.data.refreshToken) {
+    Cookies.set('refreshToken', response.data.refreshToken, {
+      path: '/',
+      sameSite: 'strict'
+    })
+  }
   return response.data
 }
 
 export const patchPassword = async (password: string) => {
   const request = { password }
-  const response = await axiosInstance.patch('/api/members/password', request)
-  return response.data
+  const refreshToken = Cookies.get('refreshToken')
+  if (refreshToken) {
+    const response = await axiosInstance.patch('/api/members/password', request)
+    return response.data
+  } else {
+    const response = await axiosInstance.patch('/api/members/initial-password', request)
+    return response.data
+  }
 }
 
 export const deleteLogout = async () => {

src/constants/common.ts

@@ -40,7 +40,7 @@ export const COLOR_LIST = [
 ]
 
 export const PERMITTED_URL = {
-  UNKNOWN: ['/login', '/pw-change-email'],
+  UNKNOWN: ['/login', '/pw-change-email', '/pw-change'],
   ROLE_USER: ['/my-request', '/task-request', '/edit-information', '/pw-change'],
   ROLE_MANAGER: [
     '/my-task',

src/router/index.ts

@@ -143,7 +143,10 @@ router.beforeEach(async (to, from, next) => {
     ROLE_ADMIN: '/member-management'
   }
 
-  if ((info.role && PERMITTED_URL.UNKNOWN.includes(to.path)) || (info.role && to.path === '/')) {
+  if (
+    (info.role && PERMITTED_URL.UNKNOWN.includes(to.path) && to.path !== '/pw-change') ||
+    (info.role && to.path === '/')
+  ) {
     return next(redirectMap[info.role])
   }
 
@@ -167,11 +170,20 @@ router.beforeEach(async (to, from, next) => {
     ROLE_ADMIN: PERMITTED_URL.ROLE_ADMIN
   }
 
-  if (from.path === redirectMap[info.role] && !permittedUrlMap[info.role].includes(to.path)) {
+  const isPathPermitted = (path: string, permittedPaths: string[]) => {
+    return permittedPaths.some(permittedPath => {
+      return path.startsWith(permittedPath)
+    })
+  }
+
+  if (
+    from.path === redirectMap[info.role] &&
+    !isPathPermitted(to.path, permittedUrlMap[info.role])
+  ) {
     return false
   }
 
-  if (!permittedUrlMap[info.role].includes(to.path)) {
+  if (!isPathPermitted(to.path, permittedUrlMap[info.role])) {
     if (to.path === redirectMap[info.role]) {
       return next()
     }

src/stores/member.ts

@@ -26,7 +26,8 @@ export const useMemberStore = defineStore('memberInfo', () => {
 
   async function updateMemberInfoWithToken() {
     const token = Cookies.get('accessToken')
-    if (!token) return
+    const refreshToken = Cookies.get('refreshToken')
+    if (!token || !refreshToken) return
 
     const { data }: { data: User } = await axiosInstance.get('/api/members/info')
     info.value = data

src/views/LoginView.vue

@@ -84,7 +84,7 @@ const handleLogin = async () => {
 
     if (!Cookies.get('refreshToken')) {
       router.push('/pw-change')
-    } else if (res && role && Cookies.get('refreshToken')) {
+    } else if (res) {
       switch (role) {
         case 'ROLE_ADMIN':
           router.push('/member-management')

src/views/PwChangeView.vue

@@ -33,7 +33,8 @@
         v-model="pw"
         placeholder="비밀번호를 입력해주세요"
         required
-        class="input-box" />
+        class="input-box"
+        autocomplete="current-password" />
       <div class="flex flex-col gap-2">
         <button
           type="submit"
@@ -60,6 +61,7 @@
           placeholder="새 비밀번호를 입력해주세요"
           required
           ref="passwordInput"
+          autocomplete="new-password"
           :class="[
             'block w-full px-4 py-4 border rounded focus:outline-none',
             isInvalid ? 'border-red-1' : 'border-border-1'
@@ -78,6 +80,7 @@
           ref="checkPwInput"
           placeholder="새 비밀번호를 다시 입력해주세요"
           required
+          autocomplete="new-password"
           :class="[
             'block w-full px-4 py-4 border rounded focus:outline-none',
             isDifferent ? 'border-red-1' : 'border-border-1'
@@ -108,9 +111,10 @@
 <script setup lang="ts">
 import { patchPassword, postPasswordCheck } from '@/api/auth'
 import TitleContainer from '@/components/common/TitleContainer.vue'
-import { nextTick, ref } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 import ModalView from '@/components/common/ModalView.vue'
 import { useRouter } from 'vue-router'
+import Cookies from 'js-cookie'
 
 const isErrorVisible = ref(false)
 
@@ -134,6 +138,13 @@ const passwordInput = ref<HTMLInputElement | null>(null)
 const isModalVisible = ref(false)
 const router = useRouter()
 
+onMounted(() => {
+  const refreshToken = Cookies.get('refreshToken')
+  if (!refreshToken) {
+    isConfirmed.value = true
+  }
+})
+
 const validatePassword = () => {
   const regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*()_+{}\[\]:;<>,.?/~`-]).{8,20}$/
   isInvalid.value = !regex.test(newPw.value)
@@ -165,7 +176,12 @@ const handleChange = async () => {
 
 const closeModal = () => {
   isModalVisible.value = !isModalVisible.value
-  router.replace('/edit-information')
+  if (Cookies.get('refreshToken')) {
+    router.replace('/edit-information')
+  } else {
+    Cookies.remove('accessToken')
+    router.replace('/login')
+  }
 }
 const closeError = () => {
   isErrorVisible.value = !isErrorVisible.value