この記事では主にvuexデータの消失とページ更新時のページジャンプを防ぐ方法を詳しく紹介し、参考として共有します。
最初に話させてください
vuex とルートインターセプトはしばらく取り組んできましたが、ついにそれから抜け出したので、それを共有したいと思います。基本的な紹介はありません。私はログイン状態ストレージの sessionStorage メソッドを使用しています。ストアを通じて一時的に保存され、プロジェクトを閉じると消えます。これは、コンピューターを再起動すると RAM に保存されていたデータが消えるのと似ています。ただし、sessionstorage、localstorage、cookie に保存されている内容は消えません
Vuex
メソッドとアイデア
まず、Vuex が特別に状態管理であることを公式 Web サイトで紹介しています。 Vue.js アプリケーション用に開発されたモードです。つまり、vuex のストア内のデータは一時的なものであり、ページが更新されて再ロードされるとすべてがクリアされ、2 回目のログインは行われません。そのため、vuex は常に空になるため、いくつかのメソッドが開発されました
1. sessionstorage (ページを閉じると消えます)、localstorage、cookie データはページが更新されても消えないため、要求されたすべてのデータを保存できます。それらに入れて使用時に取得します 2. vuex プラグインを使用します
3. ログイン時に、ページを更新する (ルート ジャンプ) ときにトークンとログイン ステータス (カスタマイズ) を割り当てます。 sessionstorageからステータスを取得してストアに割り当てます 悩んだ結果、方法3を選択しましたが、この方法はルーティングインターセプトを組み合わせて投稿する必要があります。ルーティング完了後のコード
code
index
actions// 登录 Login({ commit, state }, userInfo) { return new Promise((resolve, reject) => { login(userInfo).then(response => { let token = response.data.token; commit('SET_TOKEN', token); sessionStorage.setItem('token', token); //获取到新的token的时候赋值给sessionStorage commit('SET_ISLOGIN', true); // 登录成功修改store中的登录状态 resolve() }).catch(error => { reject(error) }) }) },
ルーティング
簡単な紹介: ルートインターセプトは、ルートの「ライフサイクル」に相当します。異なる期間にメソッドを挿入します。この期間中に実行したいことを実行するには、router.beforeEach((to, from, next) => { // ... を使用します。具体的な内容は公式サイトに詳しく書いてありますmain.js
router.beforeEach((to, from, next) => { let isLogin = sessionStorage.getItem('isLogin'); let token = sessionStorage.getItem('token'); let id = sessionStorage.getItem('id'); if (to.meta.requireAuth) { // 判断是否有权限 if (!store.state.isLogin && !isLogin && to.path !== '/login') { // store和sessionStorage中登录状态都为false并且跳转到 不是登录的页面时 都强行跳转到登录页面 next({ path: '/login', }); } else if (!isLogin && to.path !== '/login') { // 已经在登录页面进入首页的时候 sessionStorage.setItem('isLogin', store.state.isLogin); next(); } else if (isLogin && to.path !== '/login') { // 登录进入后刷新页面时 store.commit('SET_TOKEN', token); store.commit('SET_ISLOGIN', isLogin); store.commit('SET_ID', id); next(); } else { next(); } } else { next(); } });
1. main.js ファイルにルートインターセプトを記述します。vue の上に記述する必要があることに注意してください。 mount (新しい Vue)
2. ログインをクリックするとき、アクションのログイン メソッドはルート インターセプトよりも前でなければなりません3 . ログアウトしてログインするときに、sessionStorage 内の変数を削除することを忘れないでください
上記は皆さんのためにまとめました。今後皆さんのお役に立てれば幸いです。
関連記事:
jsを使ってjsonを呼び出す方法以上がページを更新する vuex データが消えず、ページがジャンプしない問題 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。