【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'
        }

        /**
         *  解析:
         *     1.直接进入 index 的时候，参数to被改变成了 "/index" ,触发路由指向，就会跑beforeEach（第一次）
         *     2.再一次 next 指向了login, 再次发生路由指向，再跑beforeEach （第二次）, 参数的to被改变成了 "/login"
         *     3.白名单判断存在，则直接执行next(),因为没有参数，所以不会再跑beforeEach。
         */

    }
     
})

router目录下的index.js

核心代码演示：

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

//引入布局组件
import Layout from '@/views/Layout';

const routes = [
  {
    path: "/",
    redirect: "login",
    hidden:true,
    meta: { 
      name: "主页"
     }
  },
  {
    path: "/login",
    name: "Login",
    hidden:true,
    meta: { 
      name: "登录"
     },
    component:() => import("../views/Login/index.vue")
  },
  /**
   * 控制台
   */
  {
    path: "/console",
    name: "Console",
    redirect: "index",
    meta: { 
      name: "控制台",
      icon: "console"
     },
    component: Layout,
    children: [
      {
        path: "/index",
        name: "Index",
        meta: { 
          name: "首页"
         },
        component: () => import("../views/Console/index.vue")
      }
    ]
  },
  /**
   * 信息管理
   */
  {
    path: "/info",
    name: "Info",
    meta: {
      name: "信息管理",
      icon: "info"
    },
    component: Layout,
    children: [
      {
        path: "/infoIndex",
        name: "InfoIndex",
        meta: {
          name: "信息列表"
        },
        component: () => import("../views/Info/index.vue")
      },
      {
        path: "/infoCategory",
        name: "InfoCategory",
        meta: {
          name: "信息分类"
        },
        component: () => import("../views/Info/category.vue")
      }
    ]
  },
  /**
   * 用户管理
   */
  {
    path: "/user",
    name: "User",
    meta: {
      name: "用户管理",
      icon: "user"
    },
    component: Layout,
    children: [
      {
        path: "/userIndex",
        name: "UserIndex",
        meta: {
          name: "用户列表"
        },
        component: () => import("../views/User/index.vue")
      }
    ]
  }
];

const router = new VueRouter({
  routes
});

export default router;

Store下的index.js

核心代码演示：

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

import app from "./modules/app.js"
import login from "./modules/login.js"
import common from "./modules/common.js"

export default new Vuex.Store({
  modules: {
       app,
       login,
       common
  }
});

Store下的modules下的app.js（common.js和login.js省略）

核心代码演示：

import { Login } from "@/api/login";
import { setToKen, removeToKen, removeUserName, setUserName, getUserName } from '@/utils/app';

const state = {  //没有做属性计算的情况下，直接用state可搞定
    isCollapse: JSON.parse(sessionStorage.getItem('isCollapse')) || false,     //JSON.parse:字符串转化为对象     1.优先去拿浏览器存储的值,如果取不到则去 ==> || false
    // isCollapse: JSON.parse(localStorage.getItem('isCollapse')) || false  
    // isCollapse: JSON.parse(Cookie.get('isCollapse')) || false  
    to_ken: '',
    username: getUserName() || ''  //调用方法后，有数据，但是在Vuex中，页面刷新，数据会丢失，所以用cookie存储到的数据为初始数据，有则用cookie存的数据，没有则为''
}

const getters = { //computed  有做属性计算的情况下，用getters
    isCollapse: state => state.isCollapse
}

const mutations = {   //必须的 同步 没有回调处理事情
    SET_COLLAPSE(state) {
        state.isCollapse = !state.isCollapse;
        //html5本地存储
        sessionStorage.setItem('isCollapse', JSON.stringify(state.isCollapse));   //JSON.stringify  转化为字符串类型
        // localStorage.setItem('isCollapse', JSON.stringify(state.isCollapse)); //JSON.stringify  转化为字符串类型

        //cookie存储
        // Cookie.set('isCollapse', JSON.stringify(state.isCollapse));
    },
    SET_TOKEN(state, value) {
        state.to_ken = value
    },
    SET_USERNAME(state, value) {
        state.username = value
    }
}

const actions = {   //可以回调处理事情

    // setMenuStatus({ state, commit }, data) {

    /**
     *  console.log(content)
     *  content.state
     *  content.getters
     *  content.commit
     *  content.rootGetters
     * 
     *  setMenuStatus(content, data) //第一种写法
     *  setMenuStatus({ state,getters,commit,rootGetters }, data)  //对象结构的写法
     */

    // commit('SET_COLLAPSE')   -->同步: 通过actions定义一个方法，然后调用mutations里面的一些东西

    // }

    login({ commit }, requestData) {
        //异步，请求接口返回数据后，接着去做别的事情
        /**
         * 接口A,接口B
         * B接口需要A接口的参数
         */
        return new Promise((resolve, reject) => {   //异步: 可以通过promise，调用一个接口，成功时返回成功状态，失败时返回失败时的状态，再去调用的地方处理相应的事情
            //接口
            Login(requestData).then((response) => {
                //toKen、username 需要存储起来
                let data = response.data.data;
                //普通的方式--login(content, requestData)
                // content.commit('SET_TOKEN',data.token);
                // content.commit('SET_USERNAME', data.username);
                //解构的方式
                commit('SET_TOKEN', data.token);
                commit('SET_USERNAME', data.username);
                setToKen(data.token);
                setUserName(data.username);
                resolve(response)
            }).catch(error => {
                reject(error)
            })
        })
    },
    exit({ commit }){
        return new Promise((resolve, reject) => {
            removeToKen();
            removeUserName();
            commit('SET_TOKEN', '');
            commit('SET_USERNAME', '');
            resolve();
        })
    }
    

}

export default {
    namespaced: true, //开启命名空间 --解决不同模块命名冲突的问题
    state,
    getters,
    mutations,
    actions
};

utils目录下的app.js

核心代码演示：

import cookie from "cookie_js";

const adminToKen = "admin_toKen";
const usernameKey = "username";

export function getToKen(){
    return cookie.get(adminToKen);
}

export function setToKen(toKen){
    return cookie.set(adminToKen, toKen);
}

export function removeToKen(){
    return cookie.remove(adminToKen);
}

export function setUserName(value) {
    return cookie.set(usernameKey,value);
}

export function getUserName() {
    return cookie.get(usernameKey);
}

export function removeUserName() {
    return cookie.remove(usernameKey);
}