vue-router のルーティングパラメータが更新されて消えてしまった場合はどうすればよいですか?

シナリオ: vue-router によって実装されたシングルページ アプリケーション。ログイン ページがログイン インターフェイスを呼び出した後、サーバーはユーザー情報を返し、router.push({name: 'index', params) を通じてホームページ コンポーネントに渡します。 : res.data})、およびホームページにデータを表示します。しかし、ページを更新するとデータが消えてしまいました。

解決策:

1. セッションとサーバーのレンダリング

従来の解決策は、ログインに成功した後、サーバーがユーザー情報に対応するセッションを生成し、ホームページ データをレンダリングすることです。応答ヘッダーを渡します。 sessionid をブラウザーに渡し、対応する Cookie ファイルを生成します。このようにして、次回ページがリクエストされると、ブラウザは http ヘッダーに対応する Cookie を取り込み、サーバーは Cookie 内のセッション ID に基づいてユーザーがログインしているかどうかを判断し、ユーザー データを表示します。 。
プロジェクトがフロントエンドとバックエンドの分離という考え方を採用しており、サーバーがインターフェイスのみを提供し、サーバー レンダリングを実行しない場合、この方法は機能しません。

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

もう 1 つの方法は、ログイン パラメータを Cookie に保存し、作成されたフックで Cookie に保存されている情報を取得して、ログイン インターフェイスを呼び出すことです。ユーザー名とパスワードを Cookie に保存することも不合理です。改良版では、ログインに成功するとサーバーがトークンを返し、有効期間内にそのトークンを介してユーザー データが取得されます。
Cookie 内のキーと値のペアは文字列であり、「=」でリンクされており、Cookie を操作するための追加のメソッドを記述する必要があるため、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(';')
    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 ストレージ

Web ストレージに関しては、多くのブラウザーがそれをサポートしていないと考えざるを得ません。実際、IE8 以降は localStorage と sessionStorage をサポートしています。 Vue プロジェクトは少なくとも IE9 をサポートしているため、Web ストレージを安心して使用できます。
localStorage にデータを保存するのに時間制限はなく、積極的に削除しない限り無効になることはありません。ページまたはブラウザを閉じると、SessionStorage は無効になります。これは、このシナリオに適しています。
トークン情報を sessionStorage に保存し、ページが更新されるたびにトークンを介してデータをリクエストすることもできますが、トークンはローカルに保存できるため、よく使用されるデータをローカルに直接保存してはどうでしょうか。ローカル データを利用すると、クライアント ネットワーク リクエストが減り、サーバーの負荷が軽減されます。
localStorage と sessionStorage は読み取り専用であるため、オブジェクトを直接指すことはできません。 Object.assign() を使用してオブジェクトをコピーすることはできません。値は文字列 "[object Object]" になるため、ループを通じて sessionStorage に属性を追加することしかできません。

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

上記は、私が最近の仕事で遭遇した問題です。最終的な解決策は、sessionStorage を使用してデータを保存することでした。より良い解決策がある場合は、お気軽に教えてください。

以上がvue-router のルーティングパラメータが更新されて消えてしまった場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。