権限が制限されているユーザーがWebアプリにログインしようとすると、次のエラーが表示されるという非常に奇妙な問題に直面しています。
Uncaught (in promise) undefined
しかし、これは最大の権限を持つユーザーでは起こりません。
この問題はリルーテが原因であると思います。ユーザーにpage_access 1がない場合は、/ holidaysにルーティングされます。もう1つの奇妙なことは、このエラーが一度だけ表示されることです。それは、ユーザーが最初にログインしたときです。ページが更新されるか、ユーザーが他のページに移動しても、表示されません。
router.js
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'dashboard',
component: Dashboard,
beforeEnter(to, from, next) {
if(localStorage.token) {
if(localStorage.page_access.indexOf('1') != -1 && localStorage.page_access != null) {
next('/holidays');
}
else {
next();
}
} else {
next('/login');
}
}
},
{
path: '/holidays',
name: 'holidays',
component: Holidays,
beforeEnter(to, from, next) {
if(localStorage.token) {
next();
} else {
next('/login');
}
}
},
],
mode: 'history'
})
router.beforeResolve((to, from, next) => {
if(localStorage.token && from.name != 'login' && to.name != 'login') {
store.dispatch('autoLogin')
.then(response => {
store.dispatch('getNavigation');
next();
})
.catch(err => {
console.log(err);
});
}
else if(from.name && !localStorage.token) {
router.go('/login');
}
else {
next();
}
});
export default router;
store.js
async autoLogin({commit}) {
const token = localStorage.getItem('token');
const remember_token = localStorage.getItem('remember_token');
if(!token) {
return;
}
try {
const res = await axios({
method: 'post',
data: { userId: localStorage.user_id, token: localStorage.remember_token },
url: 'https://controlapi.totalprocessing.com/api/get-user',
config: { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
})
.then(response => {
if(response.data.remember_token == remember_token) {
commit('authUser', { token: token });
return response;
}
else {
localStorage.clear();
return null;
}
})
.catch(e => {
this.errors.Push(e);
return e;
})
return res;
}
catch(e) {
console.log(e);
return e;
}
}
getNavigation({commit}) {
let pageAccess = localStorage.page_access == 'null' ? null : localStorage.page_access;
let subPageAccess = localStorage.sub_page_access == 'null' ? null : localStorage.sub_page_access;
axios({
method: 'post',
data: { pageAccess: pageAccess, subPageAccess: subPageAccess },
url: 'https://controlapi.totalprocessing.com/api/client-get-navigation',
config: { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
})
.then(response => {
console.log(response.data);
const data = response.data;
const tree = [];
data.reduce(function(a, b, i, r) {
// Add the parent nodes
if(a.page_id != b.page_id){
tree.Push({ page_id: a.page_id,
page_name: a.page_name,
page_path: a.path,
page_icon: a.page_icon
});
}
// Add the last parent node
if(i+1 == data.length) {
tree.Push({ page_id: b.page_id,
page_name: b.page_name,
page_path: b.path,
page_icon: b.page_icon
});
// Add the child nodes to the parent nodes
data.reduce(function(a, b) {
if(a.sub_page_id) {
const find = tree.findIndex(f => f.page_id == a.parent_id);
// Add the first child node to parent
if(!("children" in tree[find])) {
tree[find].children = [];
tree[find].children.Push({ page_id: a.sub_page_id,
page_name: a.sub_page_name,
page_path: a.sub_page_path,
page_icon: a.sub_page_icon
});
}
// Add the remaining child nodes to parent nodes
else {
tree[find].children.Push({ page_id: a.sub_page_id,
page_name: a.sub_page_name,
page_path: a.sub_page_path,
page_icon: a.sub_page_icon
});
}
}
return b;
});
}
return b;
});
commit('authNav', {
navigation: tree
});
})
.catch(e => {
this.errors.Push(e)
})
}
私たちの問題も同じです。ログインページでこのパスにジャンプして、次のように記述できます。
this.$router.Push({ path: this.redirect || '/' }, onComplete => { }, onAbort => { })
間違った書き方は:
this. $router. Push ({path: this. Redirect | '/'})
main.jsを追加します。
import Router from 'vue-router'
const routerPush = Router.prototype.Push
Router.prototype.Push = function Push(location) {
return routerPush.call(this, location).catch(error=> error)
}
または; npm i [email protected] -S