【前端】系统

App.vue

main.js

// import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import directives from "@/directives";

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(directives)

app.mount('#app')

views/LoginView.vue

views/AdminView.vue

views/admin/InfoView.vue

stores/counter.js

import {ref, computed} from 'vue'
import {defineStore} from 'pinia'

export const userInfoStore = defineStore('counter', () => {
    const userString = ref(localStorage.getItem("userInfo") || null)
    const userDict = computed(() => userString.value ? JSON.parse(userString.value) : null)
    const userToken = computed(() => userDict.value ? userDict.value.token : null)
    const userRole = computed(() => userDict.value ? userDict.value.role : null)
    const userPermission = computed(() => userDict.value ? userDict.value.permission : null)

    function doLogin(userInfo) {
        // 放到内存
        userString.value = JSON.stringify(userInfo)
        // 写入LocalStorage
        localStorage.setItem("userInfo", JSON.stringify(userInfo))
    }

    return {userPermission, userString, userToken, userRole, doLogin}
})

stores/permission.js

import {userInfoStore} from "@/stores/counter.js";

const store = userInfoStore()

export function hasPermission(allowRoleList) {
    return allowRoleList.indexOf(store.userRole) !== -1
}

export function hasPermission2(name, method) {
    const methodList = store.userPermission[name]
    if (!methodList) {
        return false;
    }
    return methodList.indexOf(method) !== -1;
}

router/index.js

import {createRouter, createWebHistory} from 'vue-router'
import {userInfoStore} from "@/stores/counter.js"

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            component: () => import('../views/AdminView.vue'),
            children: [
                {
                    path: 'home',
                    name: 'home',
                    component: () => import('../views/admin/HomeView.vue'),
                    meta: {isMenu: true, title: "首页", role: ["admin", "manager", "user"]}
                },
                {
                    path: 'user',
                    name: 'user',
                    component: () => import('../views/admin/UserView.vue'),
                    meta: {isMenu: true, title: "用户管理", role: ["admin", "manager"]}
                },
                {
                    path: 'info',
                    name: 'info',
                    component: () => import('../views/admin/InfoView.vue'),
                    meta: {isMenu: true, title: "信息管理", role: ["admin", "manager","user"]}
                },
                {
                    path: 'video',
                    name: 'video',
                    component: () => import('../views/admin/VideoView.vue'),
                    meta: {isMenu: true, title: "视频管理", role: ["admin", "user"]}
                },
            ]
        },
        {
            path: '/login',
            name: 'login',
            component: () => import('../views/LoginView.vue'),
        },
    ],
})

router.beforeEach((to, from, next) => {
    if (to.name === "login") {
        next()
        return;
    }
    const info = userInfoStore()
    if (!info.userToken) {
        next({"name": "login"})
        return;
    }
    next()
})

export default router

directives/index.js

import per from './per'
import per2 from './per2'

const directives = {
    per,
    per2,
}

export default {
    install(Vue) {
        Object.keys(directives).forEach(key => {
            Vue.directive(key, directives[key])
        })
    }
}

directives/per.js

import {userInfoStore} from "@/stores/counter.js";

export default {
    mounted(element, bindings) {
        let allowRoleList = bindings.value
        let store = userInfoStore()
        if (allowRoleList.indexOf(store.userRole) === -1) {
            element.parentNode && element.parentNode.removeChild(element)
        }
    }
}

directives/per2.js

import {userInfoStore} from "@/stores/counter.js";

export default {
    mounted(element, bindings) {
        let [name, method] = bindings.value
        const store = userInfoStore()
        const methodList = store.userPermission[name]

        if (!methodList) {
            element.parentNode && element.parentNode.removeChild(element)
            return
        }
        if (methodList.indexOf(method) === -1) {
            element.parentNode && element.parentNode.removeChild(element)
        }
    }
}