vue-routerのルーティングパラメータが更新・消失する問題の解決方法を詳しく解説

この記事では、vue-routerルーティングパラメータが更新されて消える問題の解決策を主に紹介します。興味のある友人は参照してください

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

解決策:

1、セッション&サーバーレンダリング

従来の解決策は、ログインページとホームページが 2 つの別個のページであるというもので、ログインが成功した後、サーバーはそれに対応するセッションを生成します。次に、ホームページ データをレンダリングし、応答ヘッダーを通じてセッション ID をブラウザに渡し、対応する 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

別の方法は、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(&#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 ストレージ

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 サイトの他の関連記事を参照してください。