import { createRouter, createWebHistory } from 'vue-router'
import axios from 'axios'
import store from './store'
const routerHistory = createWebHistory()
const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/views/Home.vue')
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/Login.vue'),
      meta: { redirectAlreadyLogin: true }
    },
    {
      path: '/signup',
      name: 'signup',
      component: () => import('@/views/Signup.vue'),
      meta: { redirectAlreadyLogin: true }
    },
    {
      path: '/create',
      name: 'create',
      component: () => import('@/views/CreatePost.vue'),
      meta: { requiredLogin: true }
    },
    {
      path: '/column/:id',
      name: 'column',
      component: () => import('@/views/ColumnDetail.vue')
    },
    {
      path: '/posts/:id',
      name: 'post',
      component: () => import('@/views/PostDetail.vue')
    }
  ]
})
router.beforeEach((to, from, next) => {
  // 从 vuex store 中获取用户是否登录（user.isLogin）、是否有登录过（token）
  const { user, token } = store.state
  // 通过 vue-router 的设定，获取各个路由 route 是否是需要登录后
  // 才能访问（route.meta.requiredLogin）、登录后就不用访问
  // 而是直接跳转（route.meta.redirectAlreadyLogin
  const { requiredLogin, redirectAlreadyLogin } = to.meta

  if (!user.isLogin) {    // 用户没有登录
    if (token) {  // 用户没有登录，但之前有登陆过，客户端存在有 token
      axios.defaults.headers.common.Authorization = `Bearer ${token}`
      store.dispatch('fetchCurrentUser').then(() => { // 拿着该 token 去异步获取用户信息，判断 token 是否有效，从而确定用户是否已经登录
        if (redirectAlreadyLogin) {  // token 有效，用户已经登陆，目标路径是登录后无需再访问，而是直接跳转到首页，比如登录页、注册页
          next('/')
        } else {  // 已经登录，对目标路径直接放行
          next()
        }
      }).catch(e => { // token 认证失败，用户无法登录，进行退出操作，跳转至登录页面，重新登录
        console.error(e)
        store.commit('logout')
        next('login')
      })
    } else {  // 用户没有登录，之前也没有登录过，一切是全新的"游客来访"
      if (requiredLogin) {  // 游客来访，目标路径是需要登录后才能访问，直接跳转至登录页面，如个人中心、购物车等，
        next('login')
      } else {  // 游客来访，访问主页等大众开放页面，直接放行
        next()
      }
    }
  } else {  // 用户已经登录
    if (redirectAlreadyLogin) {  // 已经登陆，目标路径是登录后无需再访问，而是直接跳转到首页，比如登录页、注册页
      next('/')
    } else {  // 已经登录，对目标路径直接放行
      next()
    }
  }
})

export default router