具體代碼就不給你貼了，也不是我自己寫得。轉(zhuǎn)述一下思想。

1.登錄成功：登錄信息同時(shí)記錄到vuex和localstorage
2.刷新之后：vuex要重新加載，所以state中就可以進(jìn)行判斷isLogging，（一般來說以token的形式存在，放到header里與后端形成驗(yàn)證），也就是從localstorage抓一下，如果沒有記個(gè)空字符串或者null
3.所有非登錄請(qǐng)求之前可以判斷state中的token是否ok，不ok就跳轉(zhuǎn)到登錄，ok就可以請(qǐng)求。

// states.js
export default {
  token:isLoggedIn()||null // 這里相當(dāng)于給每次刷新重新設(shè)置初始值
}

function isLoggedIn(){
  let token = localStorage.getItem('token');
  if(token){
      const payload = JSON.parse(window.atob(token.split('.')[1]));
      // 前端判斷token是否過期，如果過期了訪問時(shí)候會(huì)路由到login頁(yè)面
      if(payload.exp>Date.now()/1000){
        return token;
      }
  }else{
    return false;
  }
}

在vue的beforeMount鉤子中，將localstorag中的數(shù)據(jù)保存到vuex

new Vue({
  el: '#app',
  router,
  store: store,
  render: h => h(App),
  beforeMount() {
    this.$store.commit('saveVuex')
      }
})

//vuex
store/index.js
//初始化時(shí)用sessionStore.getItem('token'),這樣子刷新頁(yè)面就無需重新登錄
const state = {
    token: window.sessionStorage.getItem('token'),
    username: ''
};

//action.js
export default {
    UserLogin({ commit }, data) {
        commit(types.LOGIN, data);
    },
}
    // mutation.js
    
    const mutations = {
    [types.LOGIN]: (state, data) => {
        //更改token的值
        state.token = data;
        window.sessionStorage.setItem('token', data);
    }, 
};

methods:{

    login(){
      this.$store.dispatch('UserLogin', token);
    }

}
    

在路由跳轉(zhuǎn)時(shí) 判斷 vuex中 有無token

我寫的大概就是這個(gè)樣子，你將就著看 下 思路