admin_home/src/views/login/no-permission.vue

<template>
    <div class="massageBox">
        <div class="massageImg"><img src="@/assets/login/iconContainer.png"></div>
        <div class="massageTitle">登录状态异常</div>
        <div class="massageText">登录凭证已过期或者网络异常，请重新登录</div>
        <div class="massageBtn">
            <el-button type="primary" @click="goLogin">重新登录</el-button>
        </div>
        <!-- <div class="massageBtn">
            <el-button  @click="goLogin">管理员登录</el-button>
        </div> -->
    </div>
</template>

<script>
import { getUserUrl,setUserUrl } from '@/utils/auth'
export default {
    name: 'NoPermission',
    data() {
        return {
           
        }
    },
    methods: {
        goLogin() {
            this.$store.commit("user/LOGOUT");
            //刷新页面
            this.$router.push('/login');
        },
    },
    mounted() {
        console.log("用户token验证出错！当前的用户权限为：")
        console.log(this.$store.getters.roles)
        console.log(this.$store.getters.roles.length)
        this.$store.commit('user/SET_ROLES', [])
        console.log("正在重设用户权限，重设后的用户权限为：")
        console.log(this.$store.getters.roles)
        console.log(this.$store.getters.roles.length)
    }
}
</script>

<style scoped>
    .massageBox {
        margin: 0 auto;
        width: 280px;
        box-sizing: border-box;
        padding-top: 150px;
        .massageTitle {
            color: #333;
            font-weight: bold;
            font-size: 20px;
            text-align: center;
            padding-bottom: 12px;
        }
        .massageText {
            color: #8B8D97;
            font-size: 14px;
            text-align: center;
            padding-bottom: 30px;
        }
        .massageImg {
            padding-bottom: 40px;
            img {
                display: block;
                margin: 0 auto;
            }
        }
        .massageBtn {
            text-align: center;
            padding-bottom: 20px;
            button {
                width: 180px;
                height: 44px;
            }
        }
    }
</style>