前端登陆问题，登陆存出cookie后，路由守卫拿不到cookie

直接访问登陆页，登陆后可以跳转主页。
但是先访问主页，被路由守卫跳转到登陆页，登陆成功后无法跳回首页。
打印日志发现前者可以获取到token，但后者不行

sessionStorage.getItem("token")
store.getters.GET_TOKEN

下面贴上登陆方法和路由

const handleLogin = () => {
  loginRef.value.validate(async (valid) => {
    if (valid) {
      //记录账号密码
      if (loginForm.value.remember) {
        cookie.set("username", loginForm.value.username, {expires: 30})
        cookie.set("password", encrypt(loginForm.value.password), {expires: 30})
        cookie.set("remember", loginForm.value.remember, {expires: 30})
      } else {
        cookie.remove("username")
        cookie.remove("password")
        cookie.remove("remember")
      }

      //登陆
      let result = await request.post("login?" + qs.stringify(loginForm.value), { params: { remember: undefined } })
      let data = result.data
      if (data.code == 200) {
        const token = data.token
        const user = data.user
        const menuList = data.menuList
        store.commit('SET_TOKEN', token)
        store.commit('SET_USER', user)
        store.commit('SET_MENU', menuList)
        await nextTick()
        console.log("session token", sessionStorage.getItem("token"));
        console.log("store token", store.getters.GET_TOKEN);
        router.replace("/")
      } else {
        ElMessage.error(data.msg)
      }
    } else {
      console.log("校验失败")
    }
  })
}

store

import {createStore} from 'vuex'
import router from '@/router'

export default createStore({
    state: {},
    getters: {
        GET_TOKEN: state => {
            return sessionStorage.getItem("token")
        },
        GET_USER: state => {
            return JSON.parse(sessionStorage.getItem("user"))
        },
        GET_MENU: state => {
            return JSON.parse(sessionStorage.getItem("menuList"))
        }
    },
    mutations: {
        SET_TOKEN: (state, token) => {
            sessionStorage.setItem("token", token);
        },
        SET_USER: (state, user) => {
            sessionStorage.setItem("user", JSON.stringify(user));
        },
        SET_MENU: (state, menuList) => {
            sessionStorage.setItem("menuList", JSON.stringify(menuList))
        }
    },
    actions: {
        //登出
        logout() {
            sessionStorage.clear();
            router.replace("/login")
        }
    },
    modules: {}
})

路由守卫

import router from '@/router'
import store from '@/store'

router.beforeEach((to, from, next) => {
    const whiteList = ['/login']
    let token = store.getters.GET_TOKEN
    // let token = sessionStorage.getItem("token")
    if (token) {
        next()
    } else {
        if (whiteList.includes(to.path)) {
            next()
        } else {
            next('/login')
        }
    }
})

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/651454
• 你也可以参考下这篇文章：整合token和cookie实现登陆及验证，实现跨域前后端分离
• 除此之外, 这篇博客: 前端获取需认证图片资源的两种方法中的 一、使用cookie 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

  这个是非常常用的方法，将认证token放入cookie中发送至后台做认证。这种方法针对认证要求不高的情况，这种方法无法操作请求头

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^