【Vue.js 3.0】自定义 Hook 实现按钮权限判断

凉生阿新

已于 2024-05-20 09:34:20 修改

阅读量112

点赞数

分类专栏： # Js插件&功能函数文章标签：前端 vue.js javascript

于 2023-08-26 17:23:29 首次发布

本文链接：https://blog.csdn.net/liuxin_hello/article/details/132513790

版权

Js插件&功能函数专栏收录该内容

4 篇文章 0 订阅

订阅专栏

import { Ref, ref, onMounted, onBeforeUnmount } from 'vue';

export function useDisableButton() {
    // data 
    const isDisabled: Ref<boolean> = ref(true);
    
    onMounted(() => {
        // 获取 token 判断是否登录 
        let token: any = JSON.parse(localStorage.getItem('token') || '{}');
        // 也可自定义逻辑判断 token 是有效 .....
        token?.value ? isDisabled.value = false : isDisabled.value = true
        // 监听 storage 修改
        window.addEventListener('storage', handleLocalStorageChange);
    })

    onBeforeUnmount(() => {
        window.removeEventListener('storage', handleLocalStorageChange);
    })

    const handleLocalStorageChange = (event: any): void => {
        let { newValue, key } = event; 
        if ( key !== 'token') return
        let { value } = JSON.parse(newValue || '{}')
        value ? isDisabled.value = false : isDisabled.value = true
    }
    return { isDisabled };
}

eg：

<template>
    <!-- ps: 使用的是 element-plus组件库 -->
    <el-button type="primary" :disabled="isDisabled"> 发布主题 </el-button>
</template>

<script lang="ts" setup>
// 引入上面自定义的 hooks 
import { useDisableButton } from '@/hooks';
// 使用  isDisabled： 布尔值掉代表是否禁用 
const { isDisabled } =  useDisableButton()

</script>

没有权限，置空操作

function jwtRecheck() {
    console.warn(`[401 Warn]: 无权限请求准备重新获取 jwt，准备置空`);
    
    window.localStorage.removeItem(TOKEN);
    window.localStorage.removeItem(UUID);

    let _origin = window.location.origin;
    let hashStr = window.location.href;

    window.location.href = `${_origin}/login#${hashStr}`;
}