74 lines
1.9 KiB
Vue
74 lines
1.9 KiB
Vue
<script setup lang="ts">
|
||
import { initRouter } from "@/router/utils";
|
||
import { storageLocal } from "@pureadmin/utils";
|
||
import { type CSSProperties, ref, computed } from "vue";
|
||
import { useUserStoreHook } from "@/store/modules/user";
|
||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||
|
||
defineOptions({
|
||
name: "PermissionPage"
|
||
});
|
||
|
||
const elStyle = computed((): CSSProperties => {
|
||
return {
|
||
width: "85vw",
|
||
justifyContent: "start"
|
||
};
|
||
});
|
||
|
||
const username = ref(useUserStoreHook()?.username);
|
||
|
||
const options = [
|
||
{
|
||
value: "admin",
|
||
label: "管理员角色"
|
||
},
|
||
{
|
||
value: "common",
|
||
label: "普通角色"
|
||
}
|
||
];
|
||
|
||
function onChange() {
|
||
useUserStoreHook()
|
||
.loginByUsername({ username: username.value, password: "admin123" })
|
||
.then(res => {
|
||
if (res.success) {
|
||
storageLocal().removeItem("async-routes");
|
||
usePermissionStoreHook().clearAllCachePage();
|
||
initRouter();
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<p class="mb-2">
|
||
模拟后台根据不同角色返回对应路由，观察左侧菜单变化（管理员角色可查看系统管理菜单、普通角色不可查看系统管理菜单）
|
||
</p>
|
||
<el-card shadow="never" :style="elStyle">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>当前角色：{{ username }}</span>
|
||
</div>
|
||
<el-link
|
||
class="mt-2"
|
||
href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/permission/page/index.vue"
|
||
target="_blank"
|
||
>
|
||
代码位置 src/views/permission/page/index.vue
|
||
</el-link>
|
||
</template>
|
||
<el-select v-model="username" class="!w-[160px]" @change="onChange">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-card>
|
||
</div>
|
||
</template>
|