66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<script setup lang="ts">
|
||
import { initRouter } from "@/router/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) {
|
||
sessionStorage.removeItem("async-routes");
|
||
usePermissionStoreHook().clearAllCachePage();
|
||
initRouter();
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<el-space direction="vertical" size="large">
|
||
<el-tag :style="elStyle" size="large" effect="dark">
|
||
模拟后台根据不同角色返回对应路由（具体参考完整版pure-admin代码）
|
||
</el-tag>
|
||
<el-card shadow="never" :style="elStyle">
|
||
<template #header>
|
||
<div class="card-header">
|
||
<span>当前角色：{{ username }}</span>
|
||
</div>
|
||
</template>
|
||
<el-select v-model="username" @change="onChange">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-card>
|
||
</el-space>
|
||
</template>
|