vue3.0配置路由导航守卫和路由元信息-CSDN博客

文档接入>>

1、有些路由是无论什么权限都可以访问的？

2、有些路由是当用户登录才能访问？

3、还有一种是login登录页面，当用户登录后要求直接访问首页

有了这三种不同的路由也就代表着三种不同的行为，也就是说我们要在特定种类的路由上面添加独特的信息加以区分；

我们在配置路由的是，可以增加一个meta的字段，这个字段所对应的对象可以填写一些额外的信息；

比如我们在下列代码的create上加一个元信息，然后我们在router.beforeEach上读取这个信息

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