如何解决从搜索栏中手动访问路线时,Vue Routes注销应用程序
我第一次使用vue-cli创建了一个应用程序,并开始与其一起使用vue路由器。我已经创建了一些基于身份验证状态可以访问的路由-登录名,家庭等。
这就是我的应用程序中发生的事情-
-
如果我尝试在登录之前访问路由,则从浏览器的URL栏/搜索栏,我将被重定向到很棒的登录路由,并且效果很好。
-
当我登录应用程序时,我可以通过单击应用程序中本地路线上的按钮轻松访问嵌套路线,这也很好。
-
但是当我尝试-
a。刷新页面,我从应用程序中退出登录
b。从网址访问嵌套路由,我从应用程序注销
这是我的vuex商店的 actions.js
const actions = {
checkAdmin() {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
router.push('/home');
} else {
router.push('/');
}
});
},login(context) {
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)
.then((res) => {
context.dispatch('setAdmin',res.user);
context.dispatch('setAuthState',true);
router.push('/home');
}).catch((err) => {
console.log('err:',err);
});
},signout(context) {
firebase.auth().signOut().then(() => {
context.dispatch('setAdmin',null);
router.push('/');
},function (error) {
console.error('Sign Out Error',error);
});
},setAdmin(context,payload) {
context.commit('setAdmin',payload);
},setTheme(context,payload) {
context.commit('setTheme',setVizType(context,payload) {
context.commit('setVizType',fetchUsersList(context,payload) {
context.commit('setUserList',payload.length > 0 ? payload : ['user 1','user 2','user 3','user 4','user 5']);
},setSelectedUser(context,payload) {
context.commit('setSelectedUser',payload);
context.commit('setSessionList',[payload + ' session 1',payload + ' session 2',payload + ' session 3',payload + ' session 4']);
},fetchSessionList(context,payload) {
context.commit('setSessionList',setSelectedSession(context,payload) {
context.commit('setSession',payload);
}
};
这是我的路由器文件
const routes = [{
path: '/',name: 'Login',component: Login
},{
path: '/home',name: 'Home',component: Home,beforeEnter: (to,from,next) => {
console.log("beforeEnter",store.state.authenticated);
if (store.state.authenticated) {
console.log("Home");
next();
} else {
next("/");
console.log("Login");
}
},children: [{
path: 'dashboard',name: 'Dashboard',component: Dashboard
},{
path: 'settings',name: 'Settings',component: Settings
}]
},]
const router = new VueRouter({
mode: 'history',base: process.env.BASE_URL,routes
})
export default router
解决方法
我已经通过修改Login.vue组件解决了这个问题。似乎在加载登录组件时,它不会检查用户是否已登录。为此,我在挂载时从Login.vue中定义的方法调度checkAdmin。
这样,我可以在每次用户刷新页面或转到默认URL时检查用户是否已登录并更新管理员状态。
我希望这个答案可以帮助在vuex存储中执行所有firebase操作并遇到相同问题的人。
我决定将自己的firebase操作移至vuex商店中,只是为了使我的应用程序更干净。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。