質問編集履歴
1
やったことを追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -39,4 +39,51 @@
|
|
|
39
39
|
}
|
|
40
40
|
})
|
|
41
41
|
}
|
|
42
|
-
```
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
# やったこと1
|
|
46
|
+
- 回答いただきました通りbeforeEachとnextを使うと`This page could not be found`が発生
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
# やったこと2
|
|
50
|
+
最初に提示したコードの引数にredirectを加え`export default async ({ app, store, redirect }) => {`として`redirect(from.path)`で遷移させようと試みました。
|
|
51
|
+
結果的に遷移には成功したのですが、権限のないページでも一瞬ページが見えてから元のページに戻ります。こうなるとやはりbeforeEachを使うしかないようですが、`This page could not be found`となってしまう原因が解決できません。助言をいただけませんでしょうか。
|
|
52
|
+
以下、現状のソースです。
|
|
53
|
+
|
|
54
|
+
```
|
|
55
|
+
import Vue from 'vue'
|
|
56
|
+
import Router from 'vue-router'
|
|
57
|
+
|
|
58
|
+
Vue.use(Router)
|
|
59
|
+
//■redirectを追加
|
|
60
|
+
export default async ({ app, store, redirect }) => {
|
|
61
|
+
|
|
62
|
+
await store.dispatch('menu/security')
|
|
63
|
+
let kngnInfo
|
|
64
|
+
app.router.afterEach((to, from) => {
|
|
65
|
+
//ログインユーザの権限情報を取得
|
|
66
|
+
const security = store.getters['menu/security']
|
|
67
|
+
//メニューとURLのオブジェクトを用意
|
|
68
|
+
const menus = [
|
|
69
|
+
{ kngn: 'kngnAAA', url: '/AAA' },
|
|
70
|
+
{ kngn: 'kngnBBB', url: '/BBB' },
|
|
71
|
+
{ kngn: 'kngnCCC', url: '/CCC' },
|
|
72
|
+
{ kngn: 'kngnDDD', url: '/DDD' },
|
|
73
|
+
]
|
|
74
|
+
//遷移先画面の権限を持っているかを確認
|
|
75
|
+
const toKngn = menus.find(menu => {
|
|
76
|
+
return menu.url === to.path
|
|
77
|
+
})
|
|
78
|
+
//権限がない場合は遷移前画面へリダイレクト
|
|
79
|
+
if (!security[toKngn.kngn]) {
|
|
80
|
+
kngnInfo = security[toKngn.kngn]
|
|
81
|
+
//■redirectとすると遷移はするが一瞬toのページが見えてからfromに戻る。。。
|
|
82
|
+
redirect(from.path)
|
|
83
|
+
}
|
|
84
|
+
})
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
- ちなみにbeforeEachの場合はtoのページが一瞬も見えることなく処理されるので画面描画のライフサイクルのタイミングの問題さえクリアできれば解決するのですが。。。
|