Vue 项目中 根目录中router路由拦截 beforeEach 常用的写法

上代码吧
在我们的router.js文件下

	/*
	 * @Description: 路由设置
	 */
	import Vue from "vue";
	import Router from "vue-router";
	import store from '../store/store';  // 用到的vuex--store
	// 封装的路由引入进来
	import nd from './nd';
	import q from './q';
	// 按钮权限
	import {getCurrentModuleBtnPermission} from "../utils/btnPermission" // 按钮权限操作
	
	Vue.use(Router);
	
	//解决Vue-Router升级导致的没有捕获导航 Uncaught(in promise) navigation guard问题
	
	const originalPush = Router.prototype.push // 路由原型中的push
	Router.prototype.push = function push(location, onResolve, onReject) {
	  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
	  return originalPush.call(this, location).catch(err => err)
	}
	
	// 使用引入的路由
	const routes = [
		...nd, ...q, 
		{
		  path: "/",
		  redirect: "login",
		  auth: false
		}
	]
	
	const router = new Router({
	  mode: 'history',
	  routes
	});
	
	// 路由拦截操作
	router.beforeEach((to, from, next) => {
		//判断是否需要登录
	  if (to.matched.some(res => res.meta.auth)) { // 如果匹配到了信息就可以直接登录
	    if (sessionStorage['username']) { // 如果有找到以存在的 username
	    	// 权限btn
	    	// some()是对数组中每一项运行给定函数，如果该函数有一项返回true，则返回true。
	      if (to.matched.some(res => res.meta.btn)){
	      		// 权限按钮操作
	          getCurrentModuleBtnPermission(to.fullPath).then((res) => {
		            if (res.code == "SUCCESS") {
		              sessionStorage.setItem('btnPermission',res.data);
		            }
	          });
	      }
		// 提交一个commit 事件 
	      store.commit('setHistory', to);
	      next();
	    } else {// 如果没有权限btn
	      sessionStorage.clear(); // 清空 存储信息，进入登录页面
	      next({
	        path: "/login",
	        query: {
	          redirect: to.fullPath // 重定向
	        }
	      });
	    }
	  } else { // 如果没有匹配到信息
	    store.commit('setHistory', to);
	    next()
	  }
	})
	export default router

上面我们说道了权限，并且有路由里的meta标记，你一定要注意在我们路由配置里面添加meta , 并给值，如下图

然后继续。
我们在store文件夹下创建一个store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import { setToken } from '@/utils/storage.js'

Vue.use(Vuex)

const store = new Vuex.Store({
	// 基本数据信息
    state: {
        id_token: '', //token
        Loading: false, // loading 控制
        index: localStorage.getItem('index') || 1, // 底部导航状态
        lang: 'cn', // 语言
        history: []
    },
	//异步操作
    mutations: {
        SET_TOKEN(state, token) {
            state.id_token = token
        },
        isLoading(state) {
            state.Loading = !state.Loading;
        },
        isIndex(state, n) {
            localStorage.setItem('index', n);
            state.index = n;
        },
        setLang(state, lang) {
            localStorage.setItem('lang', lang);
            state.lang = lang;
        },
        
        setHistory(state, n) {
            // 过滤相同数据
            let arr = state.history;
            let isa = arr.filter(item => item.path == n.path);
            if (isa.length == 0) {
                // 判断是否是欢迎页
                if (n.path != '/welcome' && n.meta.name) {
                    state.history.push(n);
                }
            }
        },

        reduceHistory(state, n) {
            // 删除记录
            let arr = state.history;
            let index;
            arr.forEach((item, i) => {
                if (item.path == n.path) {
                    index = i;
                }
            })
            arr.splice(index, 1);
        },
        allHistory(state) {
            // 关闭全部
            sessionStorage.removeItem('history');
            state.history = [];
        },
        otherHistory(state, n) {
            // 关闭其他
            if (state.history.length) {
                state.history = [];
                state.history.push(n);
            }
        }
    },
    
    // 同步操作
    actions: {
        setToken({ commit }, token) {
            return new Promise((resolve, reject) => {
                commit('SET_TOKEN', token)
                setToken(token)
                resolve()
            })
        },
        editLoading(context) {
            context.commit('isLoading');
        },
        editIndex(context, n) {
            context.commit('isIndex', n);
        }
    }
});


export default store

那么我们继续写按钮权限文件，要后端配合了

import http from '../plugin/axios';

let api = {
  btnPermission: '/gateway/energy-service-ucenter/api/roles/btn/permission', // 获取按钮权限
}
/**
 * 按钮权限判断
 * @param value
 * @returns {boolean}
 */
	export function checkBtnPermission(value) {
	   const permissions = sessionStorage.getItem('btnPermission')
	    if(null == permissions){
	       return false;
	    }
	    return permissions.indexOf(value) != -1
	}

export function getCurrentModuleBtnPermission(data) {
  return http.gets(api.btnPermission, {"path":data});
}

结束。