vue ルーターのルーティングパラメータが更新後に消える問題の解決策

この記事では主に、更新後に vue-router ルーティング パラメータ が消える問題を紹介します

シナリオ: vue-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 に保存されます。 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(&#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 に属性を追加することしかできません。

rreee

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

上記がこの記事の全内容です。学習が皆様のお役に立てば幸いです。皆様も Script Home をサポートしていただければ幸いです。

以上がvue ルーターのルーティングパラメータが更新後に消える問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。