質問編集履歴

1

やったことを追加

2019/11/26 03:02

投稿

sanezane
sanezane

スコア91

test CHANGED
File without changes
test CHANGED
@@ -81,3 +81,97 @@
81
81
  }
82
82
 
83
83
  ```
84
+
85
+
86
+
87
+
88
+
89
+ # やったこと1
90
+
91
+ - 回答いただきました通りbeforeEachとnextを使うと`This page could not be found`が発生
92
+
93
+ ![イメージ説明](bac4f7e58e83fda33a13d26774f1f1e1.png)
94
+
95
+
96
+
97
+ # やったこと2
98
+
99
+ 最初に提示したコードの引数にredirectを加え`export default async ({ app, store, redirect }) => {`として`redirect(from.path)`で遷移させようと試みました。
100
+
101
+ 結果的に遷移には成功したのですが、権限のないページでも一瞬ページが見えてから元のページに戻ります。こうなるとやはりbeforeEachを使うしかないようですが、`This page could not be found`となってしまう原因が解決できません。助言をいただけませんでしょうか。
102
+
103
+ 以下、現状のソースです。
104
+
105
+
106
+
107
+ ```
108
+
109
+ import Vue from 'vue'
110
+
111
+ import Router from 'vue-router'
112
+
113
+
114
+
115
+ Vue.use(Router)
116
+
117
+ //■redirectを追加
118
+
119
+ export default async ({ app, store, redirect }) => {
120
+
121
+
122
+
123
+ await store.dispatch('menu/security')
124
+
125
+ let kngnInfo
126
+
127
+ app.router.afterEach((to, from) => {
128
+
129
+ //ログインユーザの権限情報を取得
130
+
131
+ const security = store.getters['menu/security']
132
+
133
+ //メニューとURLのオブジェクトを用意
134
+
135
+ const menus = [
136
+
137
+ { kngn: 'kngnAAA', url: '/AAA' },
138
+
139
+ { kngn: 'kngnBBB', url: '/BBB' },
140
+
141
+ { kngn: 'kngnCCC', url: '/CCC' },
142
+
143
+ { kngn: 'kngnDDD', url: '/DDD' },
144
+
145
+ ]
146
+
147
+ //遷移先画面の権限を持っているかを確認
148
+
149
+ const toKngn = menus.find(menu => {
150
+
151
+ return menu.url === to.path
152
+
153
+ })
154
+
155
+ //権限がない場合は遷移前画面へリダイレクト
156
+
157
+ if (!security[toKngn.kngn]) {
158
+
159
+ kngnInfo = security[toKngn.kngn]
160
+
161
+ //■redirectとすると遷移はするが一瞬toのページが見えてからfromに戻る。。。
162
+
163
+ redirect(from.path)
164
+
165
+ }
166
+
167
+ })
168
+
169
+ }
170
+
171
+
172
+
173
+ ```
174
+
175
+
176
+
177
+ - ちなみにbeforeEachの場合はtoのページが一瞬も見えることなく処理されるので画面描画のライフサイクルのタイミングの問題さえクリアできれば解決するのですが。。。