Pro 后台子管理员 403 问题分析

import { getHeaderName, getHeaderSider, getMenuSider } from '@/libs/system';
getChilden(data) {
if(data.length && data[0].children) {
    return this.getChilden(data[0].children)
}
return data[0].path
},
AccountLogin({
account: this.formInline.username,
pwd: this.formInline.password,
imgcode: this.formInline.code}).then(async res => {
msg();    
if (!res.data.unique_auth.length)
 return this.$Message.error('您暂无任何菜单权限');
this.$store.dispatch('admin/account/setPageTitle')
let expires = res.data.expires_time;
// 记录用户登陆信息
util.cookies.set('uuid', res.data.user_info.id, {
    expires: expires
});
util.cookies.set('token', res.data.token, {
    expires: expires
});
util.cookies.set('expires_time', res.data.expires_time, {
    expires: expires
});
const db = await this.$store.dispatch('admin/db/database', {
    user: true
});
// 保存菜单信息
// db.set('menus', res.data.menus).set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
db.set('unique_auth', res.data.unique_auth).set('user_info', res.data.user_info).write();
const menuSider = res.data.menus;
### 写入菜单
this.$store.commit('admin/menus/getmenusNav', menuSider);
let headerSider = getHeaderSider(res.data.menus);
### 写入顶级菜单
this.$store.commit('admin/menu/setHeader', headerSider);
### 找到当前菜单一个跳转的子菜单
let toPath = this.getChilden(res.data.menus);
// 获取侧边栏菜单
const headerName = getHeaderName({
    path: toPath,
    query:{},
    params:{},
}, menuSider);
const filterMenuSider = getMenuSider(menuSider, headerName);
// 指定当前显示的侧边菜单
this.$store.commit('admin/menu/setSider', filterMenuSider[0].children);
//设置首页path
this.$store.commit('admin/menus/setIndexPath', toPath);
// 记录用户信息
this.$store.dispatch('admin/user/set', {
    name: res.data.user_info.account,
    avatar: res.data.user_info.head_pic,
    access: res.data.unique_auth,
    logo: res.data.logo,
    logoSmall: res.data.logo_square,
    version: res.data.version,
    newOrderAudioLink: res.data.newOrderAudioLink
});
// if (this.jigsaw) this.jigsaw.reset();
### 调整的地址也需要调整 toPath就是当前跳转的第一个子菜单
return this.$router.replace({ path: this.$route.query.redirect || toPath || '/admin/' });}).catch(res => {    console.log(res);    msg();    let data = res === undefined ? {} : res;    this.errorNum++;    this.captchas();    this.$Message.error(data.msg || '登录失败');});

/**
@description 根据 user 里登录用户权限，对顶栏菜单进行鉴权过滤
 *
 */
filterHeader(state, getters, rootState) {
function getChilden(data) {
    if(data.children) {
        return getChilden(data.children[0])
    }
    return data.path
}
// 之前是获取了一级跳转路径，现在改为获取子菜单的第一个菜单路径，
// 这样在点击顶部菜单的时候，跳转路径保证正确
//  调用递归函数
state.header.forEach(item => {
    item.path = getChilden(item)
})
// @权限
const userInfo = rootState.admin.user.info;
const access = userInfo.access;
if (access && access.length) {
    return state.header.filter(item => {
        let state = true;
        if (item.auth && !includeArray(item.auth, access)) state = false;
        return state;
    });
} else {
    return state.header.filter(item => {
        let state = true;
        if (item.auth && item.auth.length) state = false;
        return state;
    });
}
},

/src/store/modules/admin/modules/menus.js
export default {
namespaced: true,
state: {
    menusName: getMenusName(),
    //返回首页path
    indexPath: '',
},
mutations: {
    getmenusNav (state, menuList) {
        state.menusName = menuList;
        let storage = window.localStorage;
        storage.setItem('menuList', JSON.stringify(menuList));
    },
    /**
     * @description 设置返回首页path
     * @param {Object} state vuex state
     * @param {Array} menu menu
     */
    setIndexPath(state, data) {
        state.indexPath = data;
    },
},
getters:{
    //增加了返回首页的条状路径获取，在登录的页面已经设置过。
    indexPath(state, getters) {
        const menus = state.menusName;
        if (menus.length && !state.indexPath) {
            let getChilden = function(data) {
                if(data.length && data[0].children) {
                    return getChilden(data[0].children)
                }
                return data[0].path
            }
            let toPath = getChilden(menus);
            state.indexPath = toPath;
        } else if (!menus.length && !state.indexPath) {
            return '/admin/home'
        }
        return state.indexPath;
    },
},
}
然后可以修改 403 页面的跳转路径
/src/pages/system/error/403/index.vue
<template>
<div>
    <Exception type="403" img-color :desc="$t('page.exception.e403')" :back-text="$t('page.exception.btn')" :redirect="indexPath"/>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    data(){
        return {
        }
    },
    computed: {
        ...mapGetters('admin/menus', [
            'indexPath'
        ])
    },
}
</script>