vue3.0配置路由導航守衛和路由元資訊

​​文檔接入>>​​

1、有些路由是無論什麼權限都可以通路的？

2、有些路由是當使用者登入才能通路？

3、還有一種是login登入頁面，當使用者登入後要求直接通路首頁

有了這三種不同的路由也就代表着三種不同的行為，也就是說我們要在特定種類的路由上面添加獨特的資訊加以區分；

我們在配置路由的是，可以增加一個meta的字段，這個字段所對應的對象可以填寫一些額外的資訊；

import { createRouter, createWebHistory } from 'vue-router'
import axios from 'axios'
import Home from './views/Home.vue'
import Login from './views/Login.vue'
import Signup from './views/Signup.vue'
import ColumnDetail from './views/ColumnDetail.vue'
import CreatePost from './views/CreatePost.vue'
import PostDetail from './views/PostDetail.vue'
import store from './store'
const routerHistory = createWebHistory()
const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: { redirectAlreadyLogin: true }
    },
    {
      path: '/signup',
      name: 'signup',
      component: Signup,
      meta: { redirectAlreadyLogin: true }
    },
    {
      path: '/create',
      name: 'create',
      component: CreatePost,
      meta: { requiredLogin: true }
    },
    {
      path: '/column/:id',
      name: 'column',
      component: ColumnDetail
    },
    {
      path: '/posts/:id',
      name: 'post',
      component: PostDetail
    }
  ]
})
// 全局前置守衛 按照建立順序調用 守衛是異步執行的
router.beforeEach((to, from, next) => {
  // to 指的是我們即将要到達的路由
  // from 是指正在離開的路由
  // 
  const { user, token } = store.state
  const { requiredLogin, redirectAlreadyLogin } = to.meta // 讀取路由元資訊
  if (!user.isLogin) {
    if (token) {
      axios.defaults.headers.common.Authorization = `Bearer ${token}`
      store.dispatch('fetchCurrentUser').then(() => {
        if (redirectAlreadyLogin) {
          next('/')
        } else {
          next()
        }
      }).catch(e => {
        console.error(e)
        store.commit('logout')
        next('login')
      })
    } else {
      if (requiredLogin) {
        next('login')
      } else {
        next()
      }
    }
  } else {
    if (redirectAlreadyLogin) {
      next('/')
    } else {
      next()
    }
  }
})

export default router