vue routerコンポーネントのステータスリフレッシュが消失する問題を解決

シーン:vue-router実装の単一ページアプリケーションで、ログインページがログインインタフェースを呼び出した後、サーバはユーザー情報を返し、routerを通過する.push({name:‘index’,params:res.data})はホームページにジャンプし、ホームページにデータを表示します.しかし、ページをリフレッシュすると、ログインインタフェースでホームページにアクセスするわけではないため、routerには「params:res.data」情報がなく、ホームページではログイン情報を取得できません.
ソリューション:
1、session&サーバレンダリング
従来のスキームでは、ログインページとホームページは別々の2つのページであり、ログインに成功した後、サーバはユーザー情報に対応するセッションを生成し、ホームページデータをレンダリングし、応答ヘッダを介してセッションをブラウザに転送し、対応するクッキーファイルを生成する.これにより、次回ページを要求すると、ブラウザはhttpヘッダに対応するクッキーを持参し、サーバはクッキーのセッション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」を選択し、createdフックでログインインタフェースを呼び出してデータを返します.
パスワードが暗号化されていても、ユーザー名パスワードのような機密情報をurlに置くのは合理的ではないに違いない.
3、cookie
もう1つの方法は、ログインパラメータをクッキーに格納し、createdフックでクッキーに格納されている情報を取得し、ログインインタフェースを呼び出すことです.ユーザー名パスワードをクッキーに保存するのも合理的ではありません.改善版は、ログインに成功した後、サーバがtokenを返し、有効期間内にtokenを通じてユーザーデータを取得することです.
クッキーは文字列なので、保存されたキー値ペアが「=」でリンクされているため、クッキーを操作する方法を追加する必要があります.

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、HTML 5 Webストレージ
Webストレージといえば、多くのブラウザがサポートしていないと思いますが、IE 8以上はlocalStorageやsessionStorageをサポートしています.VueプロジェクトはIE 9を最低サポートしているので、安心してWebストレージを利用できます.
localStorageストレージデータには時間制限がなく、アクティブに削除しないと失効しません.sessionStorageは、ページやブラウザが閉じると無効になり、このシーンのアプリケーションに適しています.
token情報をsessionStorageに存在させ、ページをリフレッシュするたびにtokenを通じてデータを要求することができます.しかし、tokenをローカルに格納できる以上、なぜ一般的なデータを直接ローカルに保存しないのでしょうか.ローカルデータを利用することで、クライアントネットワークの要求を低減し、サーバの負担を低減することができます.
sessionStorageに保存されている値が文字列であるため、非文字列タイプを直接割り当てると、そのtoString()メソッドが呼び出されます.例えばsessionStorageを実行する.user=user、保存されている値は[object Object Object]です.JSONを通ってもいいです.stringify()は、保存するオブジェクトをJSON文字列に変換してsessionStorageに保存し、必要に応じてJSONを通過する.parse()は文字列をオブジェクトに戻します.

let user = {
 name: 'admin',
 address: 'xxx',
 email: '[email protected]'
}
// sessionStorage.user = user // [object Object]
sessionStorage.user = JSON.stringify(user)
...
let data = JSON.parse(sessionStorage.user)

最後に
皆さんが勉強を楽にして、効率的にするために、無料で多くの資料を共有して、みんながスタックエンジニアになることを助けて、甚だしきに至ってはアーキテクチャ師になる道で棘を断ち切ることを助けます.ここでは、フロントエンドの全スタック学習交流圏をお勧めします:866109386.皆さん、グループ交流討論、学習交流、共同進歩を歓迎します.
本当に勉強を始めたとき、どこから始めたらいいか分からず、効率が低下して勉強を続ける自信に影響を与えるのは避けられない.
しかし、最も重要なのは、どの技術を重点的に把握する必要があるのか分からないことです.学習時に頻繁に穴を踏んで、最終的には多くの時間を浪費しているので、有効な資源が必要です.
最後に、瓶の病気に遭遇し、どうすればいいか分からないフロントエンドのプログラマーたちを祝福し、今後の仕事と面接ですべてが順調であることを祝福します.