vue后台管理项目的主页权限验证-鉴权

在进行编写后台管理项目登录页面中，经常会碰到到处理主页权限验证-鉴权的功能，本文简单地实现下这个逻辑以及基础代码提供。

首先，我们需要确定当前用户是否有权限访问主页。这需要考虑以下几个因素：

1. 是否有Token？

   • 如果有Token，那么用户已经登录，可以直接访问主页。
   • 如果没有Token，则需要用户进行登录操作。

2. 用户是否想访问登录页？

   • 如果用户想访问登录页，我们可以直接跳转到该页面。
   • 如果用户没有请求访问登录页，我们可以跳过此步骤。

3. 用户是否可以访问主页？

   • 如果用户有Token，则可以访问主页。
   • 如果用户没有Token，则不能访问主页，需要先进行登录操作。

// 导入所需的依赖项  
import router from '@/router';  
import nprogress from 'nprogress';  
import 'nprogress/nprogress.css';  
import store from '@/store';  
  
// 定义白名单页面路径  
const whiteList = ['/login', '/404'];  
  
// 前置路由守卫，用于判断用户是否有权限访问主页  
router.beforeEach((to, from, next) => {  
  // 开启导航条动画  
  nprogress.start();  
  // 跳转页面验证  
  if (store.getters.token) {  
    // 如果有Token，判断是否需要跳转到登录页  
    if (to.path === '/login') {  
      // 中转到首页  
      next('/');  
      nprogress.done(); // next有地址，不会跳到后置守卫，需要手动关闭  
    } else {  
      // 放行，允许访问主页或其他页面  
      next();  
    }  
  } else {  
    // 没有Token的情况，判断是否在白名单内，如果是则放行，否则跳转到登录页  
    if (whiteList.includes(to.path)) {  
      next(); // 在白名单内，放行  
    } else {  
      next('/login'); // 不在白名单内，跳转到登录页  
      nprogress.done(); // next有地址，不会跳到后置守卫，需要手动关闭  
    }  
  }  
});  
  
// 后置路由守卫，用于在访问完成后关闭导航条动画  
router.afterEach(() => {  
  nprogress.done(); // 关闭导航条动画  
});

通过上述代码，成功实现了一个基于Token的主页权限验证机制。当用户尝试访问主页时，将根据是否有Token来判断用户的身份和权限。如果有Token，则允许访问主页；如果没有Token但用户想访问登录页，则直接跳转到该页面；如果既没有Token也不在白名单内，则不允许访问任何页面并跳转到登录页。同时，还通过使用导航条动画来提升用户体验，使用户在访问过程中感受到流畅的交互效果。