vue-router의 라우팅 매개변수가 새로 고쳐지고 사라지면 어떻게 해야 하나요?

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

해결책:

1. 세션 및 서버 렌더링

기존의 솔루션은 로그인 페이지와 홈페이지가 두 개의 별도 페이지로 구성된 후 서버가 사용자 정보에 해당하는 세션을 생성한 다음 홈페이지 데이터를 렌더링하는 것입니다. 응답 헤더를 전달합니다. sessionid를 브라우저에 전달하고 해당 쿠키 파일을 생성합니다. 이런 방식으로 다음에 페이지가 요청될 때 브라우저는 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(';')
    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를 사용하여 데이터를 저장하는 것이었습니다. 더 나은 해결책이 있으면 알려주세요~

위 내용은 vue-router의 라우팅 매개변수가 새로 고쳐지고 사라지면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!