Notice
Recent Posts
- Today
- Total
Tags
- 함수형 프로그래밍
- express 파라미터
- [Vue warn]: inject() can only be used inside setup() or functional components.
- chart.js 축 font-size
- chart.js 레이블 색상 변경
- 모노레포 방식
- Next.js 라우팅
- repaint
- ToDo
- Vue 화면 접근 전 권한 체크
- Learning React
- reflow
- performance.now()
- chart.js 레전드 레이블 색상 변경
- git
- chart.js 툴팁 레이블 색상 변경
- 파라미터 전송 방법
- 모놀리식 아키텍쳐
- 멀티레포 방식
- vue-router 네비게이션 가드
빵 입니다.
화면별 권한 설정 본문
화면별 권한이 필요할 경우, vue-router에서 제공하는 네비게이션 가드를 이용해 화면에 접근 후 발생하는 이벤트들을 관리할 수 있다.
📌네비게이션 가드
vue-router가 제공하는 네비게이션 가드는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용한다.
🧿전역 가드
router.beforeEach를 사용하여 보호하기 이전에 전역 등록을 할 수 있다.
🧿라우트 별 가드
beforeEnter 가드를 라우트의 설정 객체에 직접 정의 할 수 있다.
나의 경우 전역 가드와 라우트 별 가드 둘 다 설정했다.
프로젝트에 JWT를 적용했는데, 토큰 유무뿐만 아니라 토큰이 있어도 유효 기간이 만료된 경우도 있어서 일괄 처리를 위해 전역 가드를 사용했고 , 사용자가 이미 로그인한 상태에서 다시 로그인 화면에 접근하면 홈 화면으로 리디렉션 하도록 개별 라우트 가드를 사용했다.
📌화면 경우의 수
- 권한이 없어도 되는 화면(로그인)
next() 실행 - 권한이 있어야 하는 화면(나머지 화면)
2-1. 권한 있어야 하는 화면 + 토큰이 없는 경우
next('/') 실행
2-2. 권한 있어야 하는 화면 + 토큰이 있는 경우
next() 실행
2-3. 권한 있어야 하는 화면 + 토큰이 있지만 만료된 경우
next('/') 실행
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
component: FullContainer,
children: [
{
path: '/',
name: 'login',
component: Login,
meta: { authorized: false },
// 각 라우트에 별도로 줄 수 있는 가드 beforeEnter
// 로그인 화면 진입 전 토큰 체크하고 토큰이 있으면 home 화면으로 이동
// => 사용자가 이미 로그인한 상태에서 로그인 화면(/ 경로)에 접근하는 것을 방지하기 위해 설정
beforeEnter(to, from, next) {
const token = getToken()
if (token) {
next('/home')
} else {
next()
}
}
},
{
path: '/home',
name: 'home',
component: Home,
// 라우트 메타 필드 설정
// authorized => 토큰이 필요한지 미리 설정
meta: { authorized: true }
}
]
},
]
})
// 네비게이션 가드 > 전역 가드 설정
router.beforeEach(async (to, from, next) => {
const token = getToken()
const userStore = useUserStore()
// to => 대상 Route 객체
// 대상 Route 객체가 가지고 있는 메타 필드 값 중 authorized가 true이면 토큰이 필요한 화면
if (to.meta.authorized && !token) {
// 토큰이 필요한 화면인데, 토큰이 없거나 유효하지 않다면(만료된 토큰)
// 토큰 리셋을 위해 로그아웃(토큰 리셋 코드가 포함되어 있음)하고
await userStore.actionHttpLogout()
// 슬래시('/') 화면으로 리디렉션
next('/')
} else {
// next() => 파이프라인의 다음 훅으로 이동
next()
}
})
export default router
Vue-router 공홈은 설명이 참 잘 되어있다!
https://v3.router.vuejs.org/kr/guide/advanced/navigation-guards.html
'프론트엔드 > Vue' 카테고리의 다른 글
Chart.js 툴팁 레이블 색상 변경, 레전드 레이블 색상 변경 (0) | 2024.07.31 |
---|---|
Chart.js 축 font-size 조절 (0) | 2024.07.30 |
[Vue warn]: inject() can only be used inside setup() or functional components. (0) | 2024.02.26 |
Vue3와 Vuetify3 (0) | 2024.01.29 |
vue-router 변경 감지 (동적 라우팅의 문제점) (0) | 2022.12.12 |
Comments