大家好，
想請教各位大大，
我想做會員系統跟權限判別的功能。
(1)在進入頁面之前，先判別有無登入會員(token)。
(2)沒有，就轉址到login
(3)然後再判別，有無此頁的觀看權限，沒有，就轉址

我會將token跟權限，暫存在store裡，
問題是要如何在router/index.js裡抓到store/index.js裡的資料?

//store/index.js裡的資料
export default createStore({
    state(){
        return{
            resData:{
               //使用者資料
                permit:'',//是"1,2,3"的字串
                token: ''
            }
        }
    }
})

//router/index.js
import { createRouter,createWebHashHistory  } from 'vue-router'
import store from '../store/index'

const routes = [......]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
router.beforeEach((to)=>{
  let token = store.state //有token跟permit的資料
  let token2 = store.state.resData.token //沒資料，是空白
  let permit = store.state.resData.permit//沒資料，是空白
  console.log(token)
  console.log(token2)
  console.log(permit)
})
export default router

我遇到的問題是let token = store.state，然後console.log(token)會有資料，
但是console.log(token2)跟console.log(permit)卻沒有資料。
該怎麼辦呢?
--------已解決-------------
是生命週期的關係。router的生命週期比store還前面，所以抓不到值。
這是我測試的結果，可以參考。雖然很亂..


解決方法，就是在store/index.js裡面去動態抓domain

//store/index.js
import { createStore } from "vuex";
//這裡
var hostDomain = window.location.protocol + "//" + window.location.host;

export default createStore({
    state(){
        return{
            testGetIP:{
                //這裡
                domain:hostDomain
            }
        }
    },
    .....
})

然後就能在其他元件裡使用了。

//App.vue
<script setup>
    import axios from 'axios';
    import { computed } from 'vue';
    import { useStore } from "vuex";
    const store = useStore();
    //這裡
    const domain = computed(()=>store.state.testGetIP.domain)
     //這裡
  axios.post(`${domain}/aaa/test.php`)
  .then((res)=>{
      console.log('我是APP axios的then',res.data);
  }).catch((error)=>console.log('error'))
</script>

---更新---
如果router/index.js裡有import store/index.js

//router/index.js
import { createRouter,createWebHashHistory  } from 'vue-router'
import store from '../store/index'
....

那生命週期就會變成 store->router->main.js->App.vue setup!!!!

---再更新---
如果在main.js裡使用router.isReady()，那生命週期又會變!!!!!

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//原本的
// createApp(App).use(store).use(router).mount('#app')
//改成下面
const app = createApp(App)
app.use(router)
router.isReady().then(()=>app.use(store).mount('#app'))

生命週期會變成router->store->main.js->router.beforeEach()->router.afterEach()->App.vue setup!!!!!!