Vue 라우팅 매개변수를 숨기는 방법에 대해 이야기해 보겠습니다.

Vue는 프런트엔드 개발에 널리 사용되는 인기 있는 JavaScript 프레임워크입니다. Vue Router는 개발자가 SPA(Single Page Application)의 라우팅 기능을 쉽게 구현할 수 있도록 하는 공식 라우팅 관리 도구입니다. Vue Router에서는 일반적으로 라우팅 매개변수를 사용하여 페이지를 동적으로 전환합니다. 그러나 일부 특정 시나리오에서는 라우팅 매개변수를 숨기고 암호화해야 할 수도 있습니다. 이 글에서는 Vue에서 라우팅 매개변수를 숨기는 방법을 소개합니다.

1. 라우팅 매개변수의 기본 사용

Vue Router에서 라우팅 매개변수는 콜론 접두사를 사용하여 정의됩니다. 예:

{ path: '/user/:id', component: User }

위 코드에서는 동적으로 표시할 수 있는 "id"라는 라우팅 매개변수를 정의합니다. 사용자가 "/user/1"에 접속하면 해당 사용자 정보입니다. 구성 요소에서 $route.params를 통해 현재 라우팅 매개 변수의 값에 액세스할 수 있습니다. 예:

const User = {
  template: '<div>{{ $route.params.id }}</div>'
}

2. 라우팅 매개 변수 숨기기

실제 개발에서는 때때로 사용자 ID와 같은 라우팅 매개 변수를 숨기고 싶을 때가 있습니다. 암호화되어 있습니다. 이를 통해 시스템 보안이 향상되고 사용자가 URL 매개변수를 조작하여 다른 사람의 데이터에 액세스하는 것을 방지할 수 있습니다. 라우팅 매개변수를 숨기는 기능을 구현하기 위해 Vue Router에서 제공하는 "Path Parameter Rewrite(Rewrite)" 기능을 사용할 수 있습니다. 특히 라우팅 구성에 beforeEnter 함수를 추가하여 라우팅 매개변수의 값을 재정의할 수 있습니다. 예:

{ 
  path: '/user/:id', 
  component: User,
  beforeEnter: (to, from, next) => {
    // 将id进行加密
    const id = encrypt(to.params.id)
    next({ path: `/user/${id}` })
  }
}

위 코드에서는 사용자가 이전에 경로가 호출되었습니다. 이 함수에서는 원래의 라우팅 매개변수를 암호화하고 다음 함수를 통해 점프 경로의 경로를 암호화된 경로 값으로 수정하여 라우팅 매개변수를 숨깁니다.

3. 라우팅 매개변수 복호화

라우팅 매개변수가 숨겨진 경우 실제 매개변수 값을 얻으려면 구성요소의 라우팅 매개변수를 복호화해야 합니다. 이 기능을 달성하기 위해 구성 요소의 생성된 라이프사이클 함수에서 라우팅 매개변수를 해독할 수 있습니다. 예:

const User = {
  template: '<div>{{ realId }}</div>',
  data() {
    return {
      realId: ''
    }
  },
  created() {
    // 获取加密后的id路由参数
    const id = this.$route.params.id
    // 解密id
    this.realId = decrypt(id)
  }
}

위 코드에서는 생성된 라이프사이클 함수를 통해 암호화된 라우팅 매개변수를 얻고 이를 해독 기능을 통해 전달합니다. decrypt는 이를 실제 매개변수로 변환하고 구성요소의 인스턴스 변수 realId에 해독된 값을 저장합니다. 템플릿에서는 realId 변수를 통해 실제 라우팅 매개변수 값을 표시할 수 있습니다.

4. 요약

경로 매개변수 다시 쓰기 기능을 사용하면 Vue 라우팅 매개변수를 쉽게 숨기고 해독할 수 있습니다. 이 기술은 시스템의 보안을 향상시키고 불필요한 문제를 피할 수 있습니다. 실제 개발에서는 쿠키, 세션 및 기타 기술을 결합하여 시스템 보안을 더욱 향상시킬 수도 있습니다.

위 내용은 Vue 라우팅 매개변수를 숨기는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!