vue路由实现登录拦截

vue路由实现登录拦截是常见的前端开发技巧之一，有利于确保用户访问权限的安全性。下面我将为大家介绍如何利用vue路由实现登录拦截。具体步骤如下：

1. 使用vue-router实现路由拦截

在Vue Router中，可以通过导航钩子函数实现路由拦截，拦截器可以在跳转之前或之后执行一些操作，例如更改路由，验证用户权限等。

• 前置守卫（beforeEach）

在跳转到下一个路由之前执行的导航守卫。可以使用router.beforeEach方法注册一个全局前置守卫，当用户访问需要登录的页面时，可以在beforeEach方法中判断用户是否登录。如果用户未登录，则跳转到登录页面。

const router = new VueRouter({
  routes: [...],
});

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token') ? true: false; // 判断是否登录
  if (to.path === '/login') {
    next();
  } else {
    isLogin ? next() : next('/login'); // 如果没有登录则跳转到登陆界面
  }
});

• 后置钩子（afterEach）

在跳转到下一个路由之后执行的导航守卫。可以使用router.afterEach方法注册一个全局后置钩子，当用户跳转到后，可以在afterEach方法中进行一些操作。

2. 通过路由守卫判断是否登录

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 token = localStorage.getItem('token'); // 获取本地存储的token
  if(to.meta.requiresAuth){ // 判断是否需要登录访问
    if(token){
      next();// 进入路由
    }else{
      next({
        path:'/login',
        query:{redirect: to.fullPath} // 记录当前路由路径
      });
    }
  }else{
    next();
  }
});

export default router;

示例1

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Login from '../views/Login.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        requiresAuth: true // 需要登录访问的页面
      }
    },
    {
      path: '/about',
      name: 'about',
      component: About,
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
    },
  ]
});

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token'); // 获取本地存储的token
  if(to.meta.requiresAuth){ // 判断是否需要登录访问
    if(token){
      next();// 进入路由
    }else{
      next({
        path:'/login',
        query:{redirect: to.fullPath} // 记录当前路由路径
      });
    }
  }else{
    next();
  }
});

export default router;

在这个示例中，Home组件是需要用户登录才能访问的，因此我们使用了meta.requiresAuth: true表示需要验证。

示例2

import Vue from 'vue';
import Router from 'vue-router';
import Index from '../views/Index.vue';
import User from '../views/User.vue';
import Login from '../views/Login.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: Index,
    },
    {
      path: '/user',
      name: 'user',
      component: User,
      meta: {
        requiresAuth: true // 需要登录访问的页面
      }
    },
    {
      path: '/login',
      name: 'login',
      component: Login,
    },
  ]
});

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token'); // 获取本地存储的token
  if(to.meta.requiresAuth){ // 判断是否需要登录访问
    if(token){
      next();// 进入路由
    }else{
      next({
        path:'/login',
        query:{redirect: to.fullPath} // 记录当前路由路径
      });
    }
  }else{
    next();
  }
});

export default router;

在这个示例中，User组件是需要用户登录才能访问的，因此我们使用了meta.requiresAuth: true表示需要验证。

以上就是使用vue路由实现登录拦截的完整攻略，希望能为大家提供帮助。