Cremb Pro backend sub administrator 403 problem analysis

Problem description ：

pro  In the background, a menu under the secondary menu is not checked , Log in directly with the sub administrator  403  page ;

Possible causes ：

1.  The background does not return the corresponding menu permission （ Less feasible , The corresponding menu has been checked ）

2.  Jump after background login （ It is very likely that you jump to the menu without permission and directly enter  403, The possibility is not great ）

The final question ：

Because the foreground route definition , All routing groups have the function of redirecting to sub routes , It is caused by directly jumping into the redirected route under a large menu . This question fits perfectly with the question  2  The possibility of .

Processing mode ：

Modify the automatic redirection function of all routing groups , Disable it ;

After this modification, there is no bottom menu for entering the background , There is no problem with the menu on the left

So what's the problem ？

Here's the picture , Found that the top menu is in  main.js  Medium  watch  Listen to the... Set in the route .

Be careful ：getHeaderName  Method to find out who the current top menu is from the current route

And then  headerName  But for  null  The top menu cannot be set at all ;

1.   Top menu not found , There is a problem with the address of the route adjustment , It is not found in the route of the current permission menu ;

2.   If you jump when you log in, it won't be , There is a problem with the jump route address when logging in ;

3.   If you adjust the login processing jump address , Whether this problem can be solved . The answer is yes ;

After the above analysis , Find that the root cause is ： The login jump path is incorrect . Get into  403  The jump route of returning to the home page after the page is also wrong . Get into  403  after , It's a dead cycle .

Final treatment ：

1.  Modify redirection in routing group , In the file in the following figure , Comment out redirection

Here's the picture

So we get rid of it , If the first menu of the submenu is not checked, the  403  problem

2.  Modify login, write order and side menu, and return to the home page bar path

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(' You don't have any menu permission ');

 this.$store.dispatch('admin/account/setPageTitle')

 let expires = res.data.expires_time;

 //  Record user login information

 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

 });

 //  Save menu information

 // 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;

 ###  Write menu

 this.$store.commit('admin/menus/getmenusNav', menuSider);

 let headerSider = getHeaderSider(res.data.menus);

 ###  Write top-level menu

 this.$store.commit('admin/menu/setHeader', headerSider);

 ###  Find a jump submenu of the current menu

 let toPath = this.getChilden(res.data.menus);

 //  Get sidebar menu

 const headerName = getHeaderName({

 path: toPath,

 query:{},

 params:{},

 }, menuSider);

 const filterMenuSider = getMenuSider(menuSider, headerName);

 //  Specifies the side menu currently displayed

 this.$store.commit('admin/menu/setSider', filterMenuSider[0].children);

 // Set the home page path

 this.$store.commit('admin/menus/setIndexPath', toPath);

 //  Record user information

 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();

 ###  The adjusted address also needs to be adjusted  toPath It is the first submenu of the current jump

 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 || ' Login failed ');});

The mobile number needs to be modified into the same logic when logging in

 

3.  Modify the top menu bar  path  route , File path ：/src/store/modules/admin/modules/menu.js

/**

 * @description  according to  user  Login user permission in , Authenticate and filter the top bar menu

 *

 */

filterHeader(state, getters, rootState) {

 function getChilden(data) {

 if(data.children) {

 return getChilden(data.children[0])

 }

 return data.path

 }

 //  Before that, the first level jump path was obtained , Now change to get the first menu path of the submenu ,

 //  So when you click on the top menu , The jump path is guaranteed to be correct

 //  Call recursive functions

 state.header.forEach(item => {

 item.path = getChilden(item)

 })

 // @ jurisdiction

 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;

 });

 }

},

4.  Modify to enter  403  The path of the page back to the home page

/src/store/modules/admin/modules/menus.js


export default {

 namespaced: true,

 state: {

 menusName: getMenusName(),

 // Back to the home page path

 indexPath: '',

 },

 mutations: {

 getmenusNav (state, menuList) {

 state.menusName = menuList;

 let storage = window.localStorage;

 storage.setItem('menuList', JSON.stringify(menuList));

 },

 /**

 * @description  Set to return to the home page path

 * @param {Object} state vuex state

 * @param {Array} menu menu

 */

 setIndexPath(state, data) {

 state.indexPath = data;

 },

 },

 getters:{

 // Added a strip path to get back to the home page , The login page has been set .

 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;

 },

 },

}

Then you can modify  403  Jump path of the page

/src/pages/system/error/403/index.vue

<template>

 <div>

 <Exception type=&quot;403&quot; img-color :desc=&quot;$t('page.exception.e403')&quot; :back-text=&quot;$t('page.exception.btn')&quot; :redirect=&quot;indexPath&quot;/>

 </div>

</template>

<script>

 import { mapGetters } from &quot;vuex&quot;;

 export default {

 data(){

 return {

 }

 },

 computed: {

 ...mapGetters('admin/menus', [

 'indexPath'

 ])

 },

 }

</script>

After the modification is completed , The first menu of the submenu can enter the background without setting .

 

The source code attachment has been packaged and uploaded to Baidu cloud , You can download it yourself ～

link : https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
Extraction code : yu27

Baidu cloud link is unstable , It may fail at any time , Let's keep it tight .

If Baidu cloud link fails , Please leave me a message , When I see it, I will update it in time ～

Open source address

Code cloud address ：

http://github.crmeb.net/u/defu

Github  Address ：

http://github.crmeb.net/u/defu