引き続きアプリケーション作成について
今回は動いてはいたがエラーを吐き出していた箇所を修正
まずはApp.vue
エラー修正①ログアウトをルート処理での実装に変更
修正後のApp.vueがこちら
修正箇所は１か所
<el-menu-item index=”logout” @click=”logout” :route=”{ name: ‘login’ }” >ログアウト</el-menu-item>
の部分を修正
修正前は
<el-menu-item><el-button type=”text” @click=”logout”>ログアウト</el-button></el-menu-item>
としていたが、el-menu-itemにボタンを入れ子にするとどうやら
”Unhandled error during execution of native event handler”と
”Uncaught TypeError: Cannot use ‘in’ operator to search for ‘path’ in null”
というエラーがでる
el-menu-item の入れ子にしなければこのエラーは消える
ただし、デフォルトのカラーなどのため、レイアウトに統一感が無くなってしまったので
いっそ他のメニューと同様に、Vue Routerによるルーティングの処理を施すようにコードを書き換える
それがこの
<el-menu-item index=”logout” @click=”logout” :route=”{ name: ‘login’ }” >ログアウト</el-menu-item>
の部分で、ログアウト時にログインのコンポーネントを呼び出すように修正しています
これで見た目も統一感が出ていい感じになりました
もちろんここでログアウト用のコンポーネントを作ってしまうのもよいと思います
ログイン状態の取得とVueRouterによるナビゲーションガードの処理
こちらのほうがなかなか解決しなかったのですが、ナビゲーションガードの処理です
39～53行目が新しい処理です
こちらはVue Router4.xからの処理の書き方になります
57行目からコメントアウトしているのが元の処理です
これだとnextが2回以上読み込まれてしまうため、動きはしますがエラーがでていました
分岐が多く処理が複雑化していたため、わかりにくくなっています
修正後の処理は
認証処理でログインしているユーザーが存在する場合はisLoginをTrueにして、
ログインしているユーザーが存在しない（ログアウト状態）の場合はFalseにする処理をしています
認証状態の確認を別でおこなっているわけです
このほうが分かりやすいです
そして、52行目の処理
if (requiresAuth && !isLogin) return ‘/login’
で認証が必要なコンポーネントかつログインしていない場合はログインコンポーネントを表示するというルート処理を施しています
これで認証が必要なページに対する制限を実装することができました
エラーも発生していません
ちなみに元の処理の仕方の場合も、認証に関する処理を別で書いてやればエラーを防ぐことができました
やはりなるべくシンプルにすることが重要だということですね
詳細は動画をごらんください
コメント