vue3.0配置路由导航守卫和路由元信息

刺骨的言语ヽ痛彻心扉 2022-11-06 01:53 217阅读 0赞

[文档接入>>][Link 1]

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

[Link 1]: https://router.vuejs.org/zh/guide/advanced/navigation-guards.html