[Vue warn]: inject() can only be used inside setup() or functional components.

💻서비스 환경💻

Vue3(setup 문법 사용) => ^3.3.11

vue-router => ^4.2.5

Typescript => ~5.3.0

pinia => ^2.1.7

axios => ^1.6.7

 

😒문제😒

axios에서 router를 불러오면 에러를 반환했다.

[Vue warn]: inject() can only be used inside setup() or functional components.

 

😥문제 시나리오😥

JWT(JSON Web Token)을 이용하여 로그인 하고, 로그인 유지를 작업했다.

로그인 성공하면 서버에서 Access Token을 반환하고, 반환된 토큰값을 이용해 토큰 유효기간을 생성한 후 cookie에 저장하는 방식으로 작업했다.

로그인 유지를 체크하지 않으면 기본적으로 Token의 유효기간은 1일인데, 로그아웃을 하지 않으면 cookie에 Token(유효기간이 지난) 자체가 남아있어서

다음날 출근해서 사이트 접속 시, 로그인이 풀리지 않은 상태이므로 API를 쏘고, 401 코드(Unauthorized)를 반환했다.

 

axios에서 응답 값을 가로채서 에러코드가 401이면, 로그아웃을 실행시키고, 로그인 화면으로 리다이렉트를 하고 싶었다.

 

그런데!!!

리다이렉트를 위해 라우터를 import하면 계속 에러가 떴다.

[Vue warn]: inject() can only be used inside setup() or functional components. 콘솔  에러

import { useRouter } from 'vue-router'

const router = useRouter()

router.push({ path: '/login' })

 

😀해결😀

구글링을 해보니

use 컴포저블은 주로 setup 함수 내에서 직접 사용하도록 설계되었는데, setup 함수 안이 아닌 외부에서 사용하려고 시도해서 뜬 에러였다.

 

해결을 위해 라우터 객체의 인스턴스를 다이렉트로 가져와서 사용했다.

import router from '@/router/index'

router.push({ path: '/login' })

 

🤔느낀점🤔

Vue 구조, Vue가 동작하는 방식 등 기본적인 부분에 대해 다시 한번 공부하자