vue-router 라우팅 매개변수 새로고침 및 사라짐 문제에 대한 해결 방법에 대한 자세한 설명

이 글은 주로 vue-router라우팅 매개변수새로고침 및 사라지는 문제에 대한 해결책을 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

시나리오: vue-router로 구현된 단일 페이지 애플리케이션, 로그인 페이지가 Login 인터페이스를 호출한 후 서버는 사용자 정보를 반환하고, 이 정보는 router.push({name: 'index', params: res.data})를 통해 홈페이지 구성 요소로 전달되고 데이터가 표시됩니다. 홈페이지에서. 그러나 페이지를 새로 고친 후 데이터가 사라졌습니다.

솔루션:

1, session& 서버 렌더링

기존 솔루션은 로그인 페이지와 홈페이지가 두 개의 별도 페이지로 구성된 것입니다. 로그인에 성공하면 서버가 해당 세션을 생성합니다. 그런 다음 홈페이지 데이터를 렌더링하고 응답 헤더를 통해 sessionid를 브라우저에 전달하고 해당 cookie 파일을 생성합니다. 이런 방식으로 다음에 페이지가 요청될 때 브라우저는 http 헤더에 해당 쿠키를 가져온 다음 서버는 쿠키의 sessionid를 기반으로 사용자가 로그인했는지 여부를 확인한 다음 사용자 데이터를 표시합니다. .
프로젝트가 프런트엔드와 백엔드 분리 아이디어를 채택하고 서버가 인터페이스만 제공하고 서버 렌더링을 수행하지 않는 경우 이 방법은 작동하지 않습니다.

2, $route.query

라우팅 시 로그인 요청 매개변수를 가져올 수 있습니다:

router.push({name:'index', query:{username: 'xxx', password: 'xxxxxx'}})
...
this.$ajax({
 url: 'xxx',
 method: 'post',
 data: {
  username: this.$route.query.username,
  password: this.$route.query.password
 }
})

이 방법으로 로그인 매개변수는 다음과 같이 URL에 저장됩니다: "http:// xxx .xxx.xxx/index?username=xxx&password=xxxxxx", 생성된 후크에서 로그인 인터페이스를 호출하여 데이터를 반환합니다.

비밀번호가 md5로 암호화되어 있더라도 URL에 사용자 이름, 비밀번호 등 민감한 정보를 넣는 것은 확실히 불합리합니다.

3. 쿠키

또 다른 방법은 로그인 매개변수를 쿠키에 저장한 다음 생성된 후크에서 쿠키에 저장된 정보를 가져온 다음 로그인 인터페이스를 호출하는 것입니다. 사용자 이름과 비밀번호를 쿠키에 저장하는 것도 무리입니다. 개선된 버전은 로그인 성공 후 서버가 토큰을 반환하고 유효 기간 내에 사용자 데이터를 토큰을 통해 얻습니다.

쿠키 데이터 액세스가 더 까다롭습니다. 쿠키의 키-값 쌍이 문자열이고 "="로 연결되어 있기 때문에 쿠키를 작동하려면 추가 메서드를 작성해야 하기 때문입니다.

<script>
 function setCookie (name, value, exdays) {
  let date = new Date()
  date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000))
  let expires = "expires=" + date.toGMTString()
  document.cookie = name + "=" + value + "; " + expires
 }
 function getCookie (name) {
  name = name + "="
  let cookieArr = document.cookie.split(&#39;;&#39;)
  for (let i = 0; i < cookieArr.length; i++) {
   let cookie = cookieArr[i].trim()
   if (cookie.indexOf(name) === 0) {
    return cookie.slice(name.length)
   }
  }
  return ""
 }

4. HTML5 Web Storage

웹 스토리지의 경우 많은 브라우저가 이를 지원하지 않는다고 무의식적으로 생각해야 합니다. 실제로 IE8 이상에서는 localStorage와 sessionStorage를 지원합니다. Vue 프로젝트는 IE9 이상을 지원하므로 안심하고 웹 스토리지를 사용할 수 있습니다.

localStorage에 저장된 데이터에는 시간 제한이 없으며 적극적으로 삭제하지 않는 한 무효화되지 않습니다. SessionStorage는 페이지나 브라우저가 닫히면 무효화되며 이는 이 시나리오에 적합합니다.

sessionStorage에 토큰 정보를 저장한 다음 페이지가 새로 고쳐질 때마다 토큰을 통해 데이터를 요청할 수 있지만 토큰은 로컬에 저장할 수 있으므로 일반적으로 사용되는 데이터를 로컬에 직접 저장하는 것은 어떨까요? 로컬 데이터를 활용하면 클라이언트 네트워크 요청을 줄이고 서버 부하를 줄일 수 있습니다.

localStorage와 sessionStorage는 읽기 전용이므로 객체를 직접 가리킬 수 없습니다. 값이 "[object Object]" 문자열이 되기 때문에 Object.sign()을 사용하여 객체를 복사할 수 없습니다. 따라서 루핑을 통해서만 sessionStorage에 속성을 추가할 수 있습니다.

...
for (var key in res.data.customer) {
 sessionStorage[key] = res.data.customer[key]
} 
...

위는 제가 최근 작업에서 겪었던 문제입니다. 최종 해결책은 sessionStorage를 사용하여 데이터를 저장하는 것이었습니다.

위 내용은 vue-router 라우팅 매개변수 새로고침 및 사라짐 문제에 대한 해결 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!