【Vue基础】路由守卫+白名单

路由守卫+白名单

目录：

核心代码演示：

import router from "./index";
import store from "../store/index";

import {
    getToKen, removeToKen, removeUserName } from "@/utils/app";

//白名单
const whiteRouter = ['/login'];   //indexOf方法，判断数组中是否存在指定的某个对象，如果不存在，则返回-1

//全局路由守卫   beforeEach:路由改变都会触发
router.beforeEach((to, from, next) => {
   
    /**
     * next():执行了to里面的路由对象,进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
     *
     *     1.不带参数:指向(进入)to钩子--进入下一个页面，但是不会触发beforeEach
     *     2.带参数next('/')或者next({path:'/'}):进入指定页面,发生路由变化，有变化就会触发beforeEach ---  问题:容易造成死循环--比如next('/index'),当执行到这里的时候，触发beforeEach,又遇到里面的next('/index')，又触发next('/index')......
     *     
     *     如果要进入下一个页面，直接next()--进入to钩子，调用to里面的路径，往下一个页面跑
     * 
     *      console.log(to)  // 进入的页面(下一个页面)
     *      console.log(from) // 离开之前的页面(上一个页面)
     *      console.log(next) // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。确保要调用 next 方法，否则钩子就不会被 resolved。
     *      
     *      to.path:进入的下一个页面的路径
     *     
     */

    //token令牌--处理权限

    //console.log(to) //index -->在login页面直接输入url跳转到index。 to.path == index
    if (getToKen()) {
   
        if (to.path === '/login') {
   
            removeToKen();
            removeUserName();
            store.commit('app/SET_TOKEN', '');
            store.commit('app/SET_USERNAME', '');
            next();
        } else {
   
            //获取用户角色
            //动态分配路由权限
            next();
        }

        /**
         *  1. to = /console   触发beforeEach,检测到token存在，next() --> 重定向到index
         *  2. to = /index     触发beforeEach,检测到token存在，next() --> 进入控制台首页
         */
        //路由动态添加，分配菜单，每个角色分配不同菜单
        console.log("存在");
    }else{
   
        // next('/login');  //发生路由指向变化的情况下，会触发beforeEach,又会检测toKen存不存在，造成死循环 --  解决方法：使用白名单!
        console.log("不存在");

        if (whiteRouter.indexOf(to.path) !== -1) {
     //当to.path == '/login' 的时候，存在，执行next(),跳到login页面,不触发beforeEach
            next(); //指向(进入)to钩子--进入下一个页面,to.path == '/login'
        }else{
   
            next('/login'); //发生路由指向变化，触发beforeEach ---> to.path == '/login'
        }

        /**
         *  解析:
         *