如何使用vue里面的路由拦截

在Vue.js中使用路由拦截可以通过1、全局导航守卫、2、路由独享守卫和3、组件内守卫来实现。我们将详细讨论全局导航守卫，因为它是最常用的方式。

全局导航守卫允许你在每次路由变化时执行某些逻辑。你可以在router.beforeEach钩子中添加代码，来检查用户是否具有访问某些页面的权限。例如，你可以检查用户是否已登录，如果没有登录则重定向到登录页面。

router.beforeEach((to, from, next) => {
  const isAuthenticated = !!localStorage.getItem('token'); // 检查用户是否已登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

一、全局导航守卫

全局导航守卫是指在路由配置文件中添加的守卫，它会在每次路由切换时触发，并允许你根据条件来控制路由的流转。

beforeEach: 在每次路由切换之前被调用。
beforeResolve: 在导航被确认之前，但在所有组件内守卫和异步路由组件被解析之后。
afterEach: 在每次路由切换之后被调用。

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Login from './views/Login.vue';
Vue.use(Router);
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { requiresAuth: true } // 需要认证的路由
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
});
router.beforeEach((to, from, next) => {
  const isAuthenticated = !!localStorage.getItem('token'); // 检查用户是否已登录
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next();
  }
});
export default router;

二、路由独享守卫

路由独享守卫是指在单个路由配置中添加的守卫，它只在该路由被访问时触发。

const router = new Router({
  routes: [
    {
      path: '/protected',
      component: ProtectedComponent,
      beforeEnter: (to, from, next) => {
        const isAuthenticated = !!localStorage.getItem('token');
        if (isAuthenticated) {
          next();
        } else {
          next('/login');
        }
      }
    }
  ]
});

三、组件内守卫

组件内守卫是指在组件中定义的守卫，它只在该组件被加载时触发。

export default {
  name: 'ProtectedComponent',
  beforeRouteEnter(to, from, next) {
    // 在路由进入前执行
    const isAuthenticated = !!localStorage.getItem('token');
    if (isAuthenticated) {
      next();
    } else {
      next('/login');
    }
  },
  beforeRouteUpdate(to, from, next) {
    // 在路由更新时执行
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在路由离开时执行
    next();
  }
};

四、实例说明

假设我们有一个需要用户登录才能访问的页面，以下是完整的实例：

创建路由配置

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: { requiresAuth: true }
    },
    {
      path: '/login',
      name: 'login',
      component: Login
    }
  ]
});

添加全局导航守卫

router.beforeEach((to, from, next) => {
  const isAuthenticated = !!localStorage.getItem('token');
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      });
    } else {
      next();
    }
  } else {
    next();
  }
});

创建登录逻辑

在登录成功后，将token存储到localStorage中：

methods: {
  login() {
    // 假设登录成功后获得token
    const token = 'your-token';
    localStorage.setItem('token', token);
    this.$router.push(this.$route.query.redirect || '/');
  }
}

注销逻辑

在注销时清除token，并重定向到登录页面：

methods: {
  logout() {
    localStorage.removeItem('token');
    this.$router.push('/login');
  }
}

总结

通过全局导航守卫、路由独享守卫和组件内守卫，你可以有效地控制路由的访问权限，确保只有具有适当权限的用户才能访问特定页面。全局导航守卫最常用，因为它可以在一个地方集中处理所有路由的访问控制逻辑。为了更好地应用这些知识，建议你结合项目实际需求，灵活运用各种守卫类型，并始终遵循安全最佳实践，确保用户数据和应用逻辑的安全性。

相关问答FAQs：

问题一：Vue中的路由拦截是什么？如何使用？

路由拦截是指在Vue应用中使用路由导航守卫（Route Guards）来拦截路由的跳转，以便在跳转前、跳转后或者跳转过程中执行一些特定的操作。在Vue中，路由拦截可以用来实现权限控制、用户登录验证、页面加载前的数据获取等功能。

要使用路由拦截，首先需要在Vue项目中安装并配置路由。在Vue中，常用的路由库是Vue Router。安装好Vue Router后，我们可以在路由配置中添加导航守卫。

问题二：Vue中的导航守卫有哪些类型？如何使用它们？

在Vue Router中，有三种类型的导航守卫，分别是全局前置守卫、路由独享守卫和组件内的守卫。

全局前置守卫：全局前置守卫会在每次路由跳转前被调用，无论是从哪个路由跳转到哪个路由。我们可以通过调用router.beforeEach方法来注册全局前置守卫。在守卫函数中，我们可以进行一些操作，比如判断用户是否登录、根据权限判断是否有权限访问该页面等。如果守卫函数返回false，则会取消当前的路由跳转。
路由独享守卫：路由独享守卫只会在指定的路由上被调用。我们可以在路由配置中使用beforeEnter字段来注册路由独享守卫。守卫函数的使用方式与全局前置守卫相同。
组件内的守卫：组件内的守卫会在组件内部的路由切换时被调用。我们可以在组件内部定义守卫函数，比如beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave。这些守卫函数可以在组件实例创建前、组件实例复用时和组件实例销毁前被调用，分别对应不同的生命周期阶段。

问题三：如何使用路由拦截实现权限控制？

权限控制是使用路由拦截的一个常见需求。下面是一个基本的实现步骤：

在全局前置守卫中判断用户是否登录，如果未登录则跳转到登录页面。

router.beforeEach((to, from, next) => {
  const isAuthenticated = // 判断用户是否登录
  if (!isAuthenticated && to.path !== '/login') {
    next('/login')
  } else {
    next()
  }
})

在登录页面处理用户登录逻辑，登录成功后将用户信息保存到状态管理器（如Vuex）或者本地存储中。
在其他需要权限控制的页面组件中，可以通过路由独享守卫或组件内的守卫来判断用户是否有权限访问该页面。

// 路由独享守卫
{
  path: '/admin',
  component: AdminPage,
  beforeEnter: (to, from, next) => {
    const hasPermission = // 判断用户是否有权限
    if (!hasPermission) {
      next('/403')
    } else {
      next()
    }
  }
}

// 组件内的守卫
{
  path: '/admin',
  component: AdminPage,
  beforeRouteEnter(to, from, next) {
    const hasPermission = // 判断用户是否有权限
    if (!hasPermission) {
      next('/403')
    } else {
      next()
    }
  }
}

通过以上步骤，我们可以实现基本的权限控制功能。当用户未登录或者没有权限访问某个页面时，会被拦截并跳转到登录页面或者错误页面。

文章标题：如何使用vue里面的路由拦截，发布者：飞飞，转载请注明出处：https://worktile.com/kb/p/3683545