TypeScript + Vueでの画面遷移の仕方について
仕様
- URL直叩き時のログインユーザの権限による画面遷移の制御する
- src/pluginsにて定義
- 権限のないURLを打った場合、もともとの画面(from)へリダイレクトさせるように
this.$router.push(from.path)
としていますがCannot read property '$router' of undefined
とエラーになります。
わからないこと
- 1.TypeScriptでvueを記述したときの画面遷移ってどう書けばいいのか
- 2.そもそもpluginsで画面遷移とかまでやるべきじゃない??
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default async ({ app, store }) => { await store.dispatch('menu/security') let kngnInfo app.router.afterEach((to, from) => { //ログインユーザの権限情報を取得 const security = store.getters['menu/security'] //メニューとURLのオブジェクトを用意 const menus = [ { kngn: 'kngnAAA', url: '/AAA' }, { kngn: 'kngnBBB', url: '/BBB' }, { kngn: 'kngnCCC', url: '/CCC' }, { kngn: 'kngnDDD', url: '/DDD' }, ] //遷移先画面の権限を持っているかを確認 const toKngn = menus.find(menu => { return menu.url === to.path }) //権限がない場合は遷移前画面へリダイレクト if (!security[toKngn.kngn]) { kngnInfo = security[toKngn.kngn] //ここでエラー this.$router.push(from.path) } }) }
やったこと1
- 回答いただきました通りbeforeEachとnextを使うと
This page could not be found
が発生
やったこと2
最初に提示したコードの引数にredirectを加えexport default async ({ app, store, redirect }) => {
としてredirect(from.path)
で遷移させようと試みました。
結果的に遷移には成功したのですが、権限のないページでも一瞬ページが見えてから元のページに戻ります。こうなるとやはりbeforeEachを使うしかないようですが、This page could not be found
となってしまう原因が解決できません。助言をいただけませんでしょうか。
以下、現状のソースです。
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) //■redirectを追加 export default async ({ app, store, redirect }) => { await store.dispatch('menu/security') let kngnInfo app.router.afterEach((to, from) => { //ログインユーザの権限情報を取得 const security = store.getters['menu/security'] //メニューとURLのオブジェクトを用意 const menus = [ { kngn: 'kngnAAA', url: '/AAA' }, { kngn: 'kngnBBB', url: '/BBB' }, { kngn: 'kngnCCC', url: '/CCC' }, { kngn: 'kngnDDD', url: '/DDD' }, ] //遷移先画面の権限を持っているかを確認 const toKngn = menus.find(menu => { return menu.url === to.path }) //権限がない場合は遷移前画面へリダイレクト if (!security[toKngn.kngn]) { kngnInfo = security[toKngn.kngn] //■redirectとすると遷移はするが一瞬toのページが見えてからfromに戻る。。。 redirect(from.path) } }) }
- ちなみにbeforeEachの場合はtoのページが一瞬も見えることなく処理されるので画面描画のライフサイクルのタイミングの問題さえクリアできれば解決するのですが。。。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/26 03:03