【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之登录流程与权限管理

input:-internal-autofill-selected {
  background-color: transparent !important;
  background-image: none !important;
  color: rgb(255, 255, 255) !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition-delay: 500000s;
  transition: background-color 50000s ease-out;
  -webkit-transition-delay: 50000s;
  -webkit-transition: background-color 50000s ease-out;
}

import router from '@/router'
import { useStaffStore } from '@/stores/staff'
import { usePermissionStore } from '@/stores/permission'

const whiteList = ['/login', '/404'] // no redirect whitelist
// 路由前置守卫
router.beforeEach(async (to, _from, next) => {
  const store = useStaffStore()
  // 获取token
  const token = store.token

  // 如果token存在
  if (token) {
    // 如果是登录页
    if (to.path === '/login') {
      // 跳转到首页
      next('/')
    } else {
      if (!store.staff) {
        try {
          await store.getStaffInfo()
        } catch (error) {
          store.logOut()
          next('/login')
        }
      }
      const permissionStore = usePermissionStore()
      if (!permissionStore.routes || permissionStore.routes.length == 0) {
        const accessRoutes = await permissionStore.getAccessRoutes()

        accessRoutes.forEach((route) => {
          router.addRoute(route)
        })
        next({ path: to.fullPath, replace: true, query: to.query })
      } else {
        next()
      }
    }
  } else {
    // 如果是白名单
    if (whiteList.indexOf(to.path) !== -1) {
      // 正常跳转
      next()
    } else {
      // 否则跳转到登录页
      next('/login')
    }
  }
})

// 类型
  // 1：菜单 2：页面 3：按钮
  @prop()
  menuType: '1' | '2' | '3';

  // 菜单名称
  @prop()
  title: string;

  // 访问的路径
  @prop()
  path: string;

  // 模板地址
  @prop()
  component: string;

  // 路由名称
  @prop()
  name: string;

  // 图标
  @prop()
  icon: string;

  // 父级id
  @prop()
  parentId: string;

  // 排序
  @prop()
  sort: string;

  // 是否隐藏 0：不隐藏 1：隐藏
  @prop()
  hidden: '1' | '0';

  // 权限标识（唯一）
  @prop({ unique: true })
  permission: string;

  // 是否缓存 0：不缓存 1：缓存
  @prop()
  cache: string;

  // 固定标签栏 0：不固定 1：固定
  @prop()
  affix: string;

  // 常显菜单 0：否 1：是
  @prop()
  alwaysShow: string;

import { defineStore } from 'pinia'
import { publicRouters } from '@/router'
import { getRolePermission } from '@/api/role'
import type { RouteRecordRaw } from 'vue-router'
import { arrToTree } from '@/utils/util'
import Layout from '@/layout/index.vue'
import { menuHideDic, menuCacheDic } from '@/dictionary/menu'

// 给RouteRecordRaw添加_id属性

//双星号是递归解释器遍历文件和文件夹的占位符或指令。它是一个简单的递归通配符，而只有一个星号表示全部没有递归
const modules = import.meta.glob('../views/**/**.vue')
export const usePermissionStore = defineStore('permission', {
  state: () => ({
    routes: [],
    permissions: []
  }),
  actions: {
    async getAccessRoutes() {
      let result = (await getRolePermission()).data
      let { menus, permissions } = result
      //

      menus.map((item: any) => {
        if (!item.parentId) {
          item.component = Layout
        } else {
          item.component = modules[`../views${item.component}.vue`]
        }
        item.meta = {
          title: item.title,
          icon: item.icon,
          sort: item.sort,
          cache: item.cache === menuCacheDic.trueValue,
          affix: item.menuType === '2' && item.affix === menuHideDic.trueValue,
          hidden: item.hidden === menuHideDic.trueValue,
          alwaysShow:
            item.menuType === '1' && item.alwaysShow === menuHideDic.trueValue
        }
      })
      // 递归处理后台返回的路由数据
      const routes: RouteRecordRaw[] = arrToTree({
        list: menus,
        id: '_id',
        pid: 'parentId',
        children: 'children'
      })

      this.routes = publicRouters.concat(routes)
      this.permissions = permissions
      return routes
    }
  }
})

// main.ts
import './permission'

// directives/index/ts
const directives: any = import.meta.glob('./module/*.ts', { eager: true })

export default {
  install(app: any) {
    Object.keys(directives).forEach((key) => {
      const name = key.replace(/\.\/module\/(.*)\.ts/, '$1')
      app.directive(name, directives[key].default)
    })
  }
}

import directives from './directives'

app.use(directives)

import { usePermissionStore } from '@/stores/permission'
import { useStaffStore } from '@/stores/staff'
import { superAdminRole } from '@/dictionary/staff'

export default {
  mounted(el: any, binding: any) {
    const permissionStore = usePermissionStore()
    const staffStore = useStaffStore()

    if (staffStore.staff?.role_code === superAdminRole) {
      return
    }
    const hasPermission = permissionStore.permissions.includes(binding.value)
    if (!hasPermission) {
      el.remove()
    }
  }
}