> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/js/vuejs/vue-cli-3/vue-router-4/guard/beforeeach.md).
# beforeEach
## 전역 beforeEach 가드
전역 beforeEach 가드는 다음과 같이 생성된 라우터 인스턴스에 설정한다.
```javascript
const router = createRouter({...});
router.beforeEach((to, from, next)=>{
});
export default router;
```
beforeEach 가드의 매개변수 정보는 다음과 같다.
* to - 목적 위치 정보
* from - 출발 위치 정보
* next - 다음 단계에 전달할 값이 있을 경우 선택적으로 사용. 옵션이며 사용할 경우 한번만 호출하도록 구성
beforeEach 가드는 다음 값을 반환할 수 있다.
* `true` - 가드를 통과하여 다음 단계로 진행할 수 있도록 승인
* `false` - 가드를 통과하지 못하도록 차단
### 적용 테스트
다음과 같이 로그를 출력하도록 만들고 적용 결과를 확인한다.
```javascript
router.beforeEach((to,from)=>{
console.log(to, from);
return true;
});
```
### 전역 beforeEach 가드 적용 사례
목적지 객체(to) 등을 조사하여 특정 meta 정보 또는 param 정보가 존재하지 않을 경우 차단하도록 구현할 수 있다. 다음 코드는 목적지 주소에 error라는 이름의 query가 존재할 경우 차단하는 코드이다.
```javascript
router.beforeEach((to)=>{
//error라는 이름의 쿼리가 있을 경우 값의 유무와 관계없이 차단
if('error' in to.query) return false;
return true;
});
```
App.vue의 router-link를 다음과 같이 수정한다.
```markup
first screen
second screen
second screen(error)
```
### 결과
