vue3使用vue-router及路由权限拦截方式

2023年6月11日上午10:16 • JavaScript

让我为你讲解一下“vue3使用vue-router及路由权限拦截方式”的完整攻略。

1. 安装和配置vue-router

首先需要在项目中安装vue-router。

npm install vue-router

接下来在main.js中配置路由，并将其挂载到Vue实例上：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

createApp(App)
  .use(router)
  .mount('#app')

2. 路由守卫

路由守卫可以用来拦截导航，从而控制用户访问页面的权限。它主要有3种类型：

全局守卫
路由独享守卫
组件内守卫

在这里，我们将会使用全局守卫来实现路由权限拦截功能。

// 定义路由
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: { requiresAuth: true } // 添加meta元数据
    }
  ]
})

// 定义路由守卫
router.beforeEach((to, from, next) => {
  // 判断路由是否需要登录权限
  if (to.meta.requiresAuth) {
    // 判断是否已经登录
    if (isLogin()) {
      next()
    } else {
      next({
        path: '/',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

以上代码中，我们给Profile路由添加了一个meta元数据，用来标识该路由需要登录权限。而在路由守卫中，则先判断了当前路由是否需要登录，再判断用户是否已经登录，如果未登录则跳转到登录页面。

3. 示例说明

下面，我们来看看如何使用上述方法来实现路由权限控制。

示例1：登录页面

假设我们的系统有一个登录页面，当用户输入用户名和密码后，如果验证通过，则进入系统功能主页。

// 在登录页面中添加以下逻辑
import { useStore } from 'vuex'

export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 真正的登录逻辑
      // todo...

      const store = useStore()
      store.commit('login', currentUser) // 将用户信息保存在Vuex中

      if (router.currentRoute.value.query.redirect) {
        this.$router.replace(router.currentRoute.value.query.redirect)
      } else {
        this.$router.push('/')
      }
    }
  }
}

在用户登录成功后，我们将会把用户信息存储在Vuex中，并根据路由参数中的redirect来判断用户需要跳转到哪个页面。

示例2：功能页面

假设我们系统中有一些需要登录才能访问的功能页面，如个人资料页，只有登录后的用户才能访问。

// 在功能页面中添加以下路由表达式
const routes = [
  {
    path: '/profile',
    component: Profile,
    meta: { requiresAuth: true }
  }
]

在路由表达式中，给Profile路由添加requiresAuth=true的元信息，表示该路由需要登录权限。

// 在功能页面中添加以下逻辑代码
import { computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'Profile',

  setup() {
    const store = useStore()

    const currentUser = computed(() => store.getters.currentUser)

    return {
      currentUser
    }
  }
}

在功能页面中，我们从Vuex中获取当前用户信息，并实现了一个简单的computed属性，来判断当前用户是否已经登录。如果用户未登录，则会被路由守卫拦截并跳转到登录页面。