防止用户复制管理员网址进入页面、设置禁用隐藏按钮权限以及防止修改禁用按钮权限

防止用户复制管理员网址进入页面

Login.vue页面

<script>
import {initDynaminRoutes} from '../router/index.js';
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "admin",
        password: "admin",
      },
      isloading: false,
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 18,
            message: "长度在 3 到 18 个字符",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 3,
            max: 18,
            message: "长度在 3 到 18 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    login() {
      this.isloading = true;
      this.$api
        .login({
          username: this.form.username,
          password: this.form.password,
        })
        .then((res) => {
          console.log(res);
          this.$store.commit("setUser", res.data);
          window.sessionStorage.setItem("token", res.data.token);
          this.isloading = false;
          this.$router.push("/");
          // 调用方法
          initDynaminRoutes()
          this.$message({
            message: "恭喜你，登录成功",
            type: "success",
          });
        });
    },
  },
};
</script>

router页面 

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import NotFound from "../views/NotFound.vue";
import store from "../store/index.js";
Vue.use(VueRouter);
const one = {
  path: "/menu/one",
  component: () => import("@/views/Page1.vue"),
};
const two = {
  path: "/menu/two",
  component: () => import("@/views/Page1.vue"),
};
const three = {
  path: "/menu/three",
  component: () => import("@/views/Page1.vue"),
};
const four = {
  path: "/menu/four",
  component: () => import("@/views/Page1.vue"),
};
const five = {
  path: "/menu/five",
  component: () => import("@/views/Page1.vue"),
};
// 这里的ruleMapping
const ruleMapping = {
  "/menu/one": one,
  "/menu/two": two,
  "/menu/three": three,
  "/menu/four": four,
  "/menu/five": five,
};
console.log(ruleMapping);
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
    redirect: "/menu/one",
    children: [],
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
  },
  {
    path: "/login",
    name: "Login",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/Login.vue"),
  },
  {
    path: "*",
    name: "NotFound",
    component: NotFound,
  },
];

const router = new VueRouter({
  routes,
});
router.beforeEach((to, from, next) => {
  if (to.path == "/login") {
    next();
  } else {
    let token = window.sessionStorage.getItem("token");
    if (!token) {
      next("/login");
    } else {
      next();
    }
  }
});
// 动态导出路由
export function initDynaminRoutes() {
  /* console.log(store);
  console.log(router); */
  const rulerouter = router.options.routes;
  console.log(rulerouter);
  console.log(rulerouter[0].children);
  const rightlist = store.state.user.rights;
  console.log(rightlist);
  rightlist.forEach((v) => {
    // console.log(v);
   if (v.children) {
    v.children.forEach(item => {
/*       console.log(item);
      console.log(item.path); */
      if (item.path) {
        // 这里的ruleMapping就是上面创建数组的名称
        const temp = ruleMapping[item.path]
        console.log(temp);
        rulerouter[0].children.push(temp)
        console.log( rulerouter[0].children);
        rulerouter[0].children.forEach(v=>{
          router.addRoute('Home',v)
        })
      }
    })
   }
  })
  router.addRoutes(rulerouter)
}

const originalPush = VueRouter.prototype.push;
// 重写了原型上的push方法，统一的处理了错误信息
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};
export default router;

设置禁用隐藏按钮权限

<el-button type="primary" @click="$emit('show')" v-permission="{action:'add',effect:'disabled'}">添加商品</el-button>

import Vue from 'vue'
import router from '@/router/index.js'
Vue.directive('permission',{
	inserted:function(el,binding){
		console.log(el);
		console.log(binding.value.action);
		var action = binding.value.action
		var effect = binding.value.effect
		console.log(router.currentRoute.meta);
		if(router.currentRoute.meta.indexOf(action) === -1){
			if(effect === "disabled"){
				el.disabled = true
				el.classList.add('is-disabled')
			}else {
				el.parentNode.removeChild(el)
			}
		}
	}
}) 

 

 

 一定要刷新一次页面！！！

防止修改禁用按钮权限 

/* resful语法 */
const map = {
	'get':'view',
	'post':'add',
	'put':'edit',
	'delete':'delete'
}
// 添加请求拦截器
axios.interceptors.request.use(function(config) {
	// 在发送请求之前做些什么
	console.log(config);
	var method = map[config.method]
	var currentRoute = router.currentRoute.meta
	console.log(currentRoute);
	if(config.url != '/login'){
		if(currentRoute && currentRoute.indexOf(method) === -1){
			alert('您没有相关权限！')
			return new Promise(function(resolve,reject){
				reject('请求错误')
			})
		}
	}
	return config;
});