새로 고침 후 Vue 라우터 라우팅 매개변수가 사라지는 문제에 대한 해결 방법

이 글에서는 주로 vue-router라우팅 매개변수새로 고침 후 사라지는 문제를 소개합니다

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

해결책:

1, session&서버 렌더링

기존의 해결 방법은 로그인 페이지와 홈페이지가 두 개의 별도 페이지로 구성된 것입니다. 로그인에 성공하면 서버가 사용자 정보에 해당하는 세션을 생성하고 그런 다음 홈 페이지 데이터를 렌더링하고 응답 헤더를 통해 세션 ID를 브라우저에 전달하고 해당 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. Cookie

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

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

<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 웹 저장소

웹 저장소의 경우 실제로 많은 브라우저가 이를 지원하지 않는다고 생각해야 합니다. 실제로 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를 사용하여 데이터를 저장하는 것이었습니다. 더 나은 해결 방법이 있으면 알려 주시기 바랍니다.

위 내용은 이 기사의 전체 내용입니다. . 학습이 모든 사람에게 도움이 되기를 바라며, 모두가 Script Home을 지원해 주기를 바랍니다.

위 내용은 새로 고침 후 Vue 라우터 라우팅 매개변수가 사라지는 문제에 대한 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!