- Today
- Total
- express 파라미터
- performance.now()
- git
- vue-router 네비게이션 가드
- Vue 화면 접근 전 권한 체크
- ToDo
- Next.js 라우팅
- chart.js 툴팁 레이블 색상 변경
- repaint
- 멀티레포 방식
- 파라미터 전송 방법
- reflow
- 모노레포 방식
- chart.js 레이블 색상 변경
- [Vue warn]: inject() can only be used inside setup() or functional components.
- 모놀리식 아키텍쳐
- 함수형 프로그래밍
- chart.js 축 font-size
- Learning React
- chart.js 레전드 레이블 색상 변경
빵 입니다.
[Vue warn]: inject() can only be used inside setup() or functional components. 본문
[Vue warn]: inject() can only be used inside setup() or functional components.
bread-gee 2024. 2. 26. 10:42💻서비스 환경💻
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하면 계속 에러가 떴다.
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가 동작하는 방식 등 기본적인 부분에 대해 다시 한번 공부하자
'프론트엔드 > Vue' 카테고리의 다른 글
Chart.js 축 font-size 조절 (0) | 2024.07.30 |
---|---|
화면별 권한 설정 (0) | 2024.03.04 |
Vue3와 Vuetify3 (0) | 2024.01.29 |
vue-router 변경 감지 (동적 라우팅의 문제점) (0) | 2022.12.12 |
template 과 slot (0) | 2022.09.26 |