VueはbeforeEachを使って登録状態チェック機能を実現します。
909 ワード
VueRouterのbeforeEachフック関数を使って、ナビゲーションがジャンプする前に登録状態をチェックする必要があります。
1.ログイン要求インターフェースの時にユーザーの情報を返します。例えば、userInfo:{userId:''123',userName:'小明')で、ログインが成功したらuserInfoをstoreに保存します。
2.beforeEachを使って登録状態検査を実現する
以上のこのVueはbefore Eachを使って登録状態の検査機能を実現しました。小編集は皆さんに全部の内容を共有しています。参考にしてもらいたいです。どうぞよろしくお願いします。
1.ログイン要求インターフェースの時にユーザーの情報を返します。例えば、userInfo:{userId:''123',userName:'小明')で、ログインが成功したらuserInfoをstoreに保存します。
2.beforeEachを使って登録状態検査を実現する
vueRouter.beforeEach((to, from, next) => {
//store getters getUser
//userId
let isLogin = store.getters.getUser.userId;
if (!isLogin) {//
if (to.path !== '/login') {//
return next({path: '/login'});
}else {
next();
}
}else {//
if (to.path === '/login') {//
return next({path: '/index'});
}
next();
}
});
ログインを終了するには、storeに保存されているユーザ情報を空にしておくだけでいいです。以上のこのVueはbefore Eachを使って登録状態の検査機能を実現しました。小編集は皆さんに全部の内容を共有しています。参考にしてもらいたいです。どうぞよろしくお願いします。