📒 笔记文档

方式一：直接在路由前置拦截中判断菜单是否有权限

在permission.ts中添加内容，

import { ElMessage } from "element-plus";
import router from "@/router/routes";
router.beforeEach((to, from, next) => {
  // 从 localStorage 中获取菜单
  const menu = localStorage.getItem('menu')||'[]'
  if (!menu&&to.name!=='login') {
    ElMessage({
      message: '请先登录',
      type: 'warning',
    })
    return next({ path: '/login' })
  }

  const menuList = JSON.parse(menu)
  // 遍历菜单，判断是否有权限访问当前路由
  let hasPermission = false
  menuList.forEach((item:string) => {
    if (item===to.path) {
      hasPermission = true
    }
  })
  console.log(hasPermission)
  if (!hasPermission&&to.name!=='login') {
    ElMessage({
      message: '您没有权限访问该页面',
      type: 'warning',
    })
    return next(false)
  }
  // 正常放行
  next()
})
router.afterEach((to, from) => {
  console.log(to, from)
})

方式二：自定义指令