Javascript 如何防止用户在登录Vuejs后进入登录页面？

用户登录后，我不希望用户访问登录页面。我在下面试过这个，但好像不起作用。我该怎么做才能让它工作

[更新]

当我

console.log（store.getters.loggedIn

inside

时，如果
语句返回false，那么我认为问题可能出在
store.getters
上。由于我是Vuejs的初学者，我真的不知道如何修复它。我将在下面添加我的vuex代码。希望我能得到一些帮助

谢谢

// vuex
export default new Vuex.Store({
  state: {
    accessToken: null,
    refreshToken: null,
    APIData: "",
  },
  mutations: {
    updateStorage(state, { access, refresh }) {
      state.accessToken = access;
      state.refreshToken = refresh;
    },
    destroyToken(state) {
      state.accessToken = null;
      state.refreshToken = null;
    },
  },
  getters: {
    loggedIn(state) {
      return state.accessToken != null;
    },
  },
  actions: {
    userLogout(context) {
      console.log("hello");
      if (context.getters.loggedIn) {
        context.commit("destroyToken");
      }
    },
    userLogin(context, usercredentials) {
      return new Promise((resolve, reject) => {
        getAPI
          .post("/rest-api-token/", {
            email: usercredentials.email,
            password: usercredentials.password,
          })
          .then((response) => {
            context.commit("updateStorage", {
              access: response.data.access,
              refresh: response.data.refresh,
            });
            resolve();
            console.log(this.getters.loggedIn); <-- return true
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
  },
  modules: {},
});

// main.js
router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresLogin)) {
    if (!store.getters.loggedIn) {
      next({ name: "login" });
    } 
    else {
      next();
    }
  } 
  // if user is logged in and go to log in page redirect them to home page
  else if (to.matched.some(record => record.meta.requiresVisitor)) {
    if (store.getters.loggedIn) {
      next({ name: 'home'});
    }
    else {
      next();
    }
  }
  // 
  else {
    next();
  }
});

//index.js (router)
const routes = [
  {
    path: "/",
    name: "login",
    component: Login,
    meta: {
      requiresVisitor: true,
    },
  },
  {
    path: "/home",
    name: "home",
    component: Home,
    meta: {
      requiresLogin: true,
    },
  },
  {
    path: "/logout",
    name: "logout",
    component: Logout,
  },
];

//vuex
导出默认的新Vuex.Store({
声明：{
accessToken:null，
refreshToken:null，
APIData:“”，
},
突变：{
updateStorage（状态，{access，refresh}）{
state.accessToken=access；
state.refreshToken=刷新；
},
销毁令牌（状态）{
state.accessToken=null；
state.refreshToken=null；
},
},
吸气剂：{
洛格丁（州）{
return state.accessToken！=null；
},
},
行动：{
用户注销（上下文）{
console.log（“你好”）；
if（context.getters.loggedIn）{
提交（“销毁令牌”）；
}
},
用户登录（上下文、用户凭据）{
返回新承诺（（解决、拒绝）=>{
getAPI
.post（“/rest api令牌/”{
电子邮件：usercredentials.email，
密码：usercredentials.password，
})
。然后（（响应）=>{
commit（“updatestreage”{
访问：response.data.access，
刷新：response.data.refresh，
});
解决（）；
log（this.getters.loggedIn）{
拒绝（错误）；
});
});
},
},
模块：{}，
});
//main.js
路由器.beforeach（（到、从、下一个）=>{
if（to.matched.some（（记录）=>record.meta.requiresLogin））{
if（！store.getters.loggedIn）{
下一步（{name:“login”}）；
} 
否则{
next（）；
}
} 
//如果用户已登录并转到登录页面，请将其重定向到主页
else if（to.matched.some（record=>record.meta.requiresVisitor））{
if（store.getters.loggedIn）{
下一个（{name:'home'}）；
}
否则{
next（）；
}
}
// 
否则{
next（）；
}
});
//index.js（路由器）
常数路由=[
{
路径：“/”，
名称：“登录”，
组件：登录，
元：{
客人是的，
},
},
{
路径：“/home”，
姓名：“家”，
组成部分：家庭，
元：{
requiresLogin:true，
},
},
{
路径：“/logout”，
名称：“注销”，
组件：注销，
},
];
我会在我的商店中添加一个状态，名为：

状态：{
accessToken:null，
refreshToken:null，
APIData:“”，
loggedIn:false//这看起来有点一致。你调试过那些值吗，可能你的store.getters有问题吗？我把console.log（store.getters.loggedIn）放入
语句中，如果它返回false:（那么它解决了吗？没有解决了yetok让我重新措辞；）您当前的问题是：为什么
store.getters.loggedIn
false，不是吗？如果不是这样，上面的代码应该可以工作？