请教不同权限不同菜单的问题

oraeorae commented 1 year ago

请教一下想要不同权限不同菜单应该怎么实现？

我后端返回的只有身份类型，比如（admin，user）；我在前端应该怎么改写才能直接跳到对应菜单呢；

我改写到现在，变成了全部路由菜单都显示出来了

理想效果：（能直接这样写就最简单了，这个可行吗）

`` 目前的代码：

permiss.js

import router from './router'
import storage from 'store'
import NProgress from 'nprogress' // progress bar
import '@/components/NProgress/nprogress.less' // progress bar custom style
import { setDocumentTitle, domTitle } from '@/utils/domUtil'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { i18nRender } from '@/locales'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

// const allowList = ['login', 'register', 'registerResult'] // no redirect allowList
const loginRoutePath = '/user/login'
// const defaultRoutePath = '/dashboard/workplace'

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  to.meta && typeof to.meta.title !== 'undefined' && setDocumentTitle(`${i18nRender(to.meta.title)} - ${domTitle}`)
  /* has token */
  const token = storage.get(ACCESS_TOKEN)
  // https://www.cnblogs.com/AdolphWilliam/p/15562351.html
  if (token) { // 是否存在token
    console.log('token存在')
    next()
  } else {
    if (to.path === loginRoutePath) { // 如果是登录页面路径，就直接next()
      next()
    } else { // 不然就跳转到登录；
      next(loginRoutePath)
    }
  }
})

router.afterEach(() => {
  NProgress.done() // finish progress bar
})

store/module/user.js

import storage from 'store'
import expirePlugin from 'store/plugins/expire'
import { getInfo, logout } from '@/api/login'
import { login } from '@/api/login_api'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { welcome } from '@/utils/util'

// 修改教程：https://zhuanlan.zhihu.com/p/431139611
storage.addPlugin(expirePlugin)
const user = {
  state: {
    token: '',
    isInitPwd: '',
    loginTime: '',
    loginIP: '',
    roleType: '',
    userName: '',
    userID: '',
    lastLoginTime: '',
    lastLoginIP: '',
    roles: []
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_ISINITPWD: (state, isInitPwd) => {
      state.isInitPwd = isInitPwd
    },
    SET_LASTLOGINTIME: (state, lastLoginTime) => {
      state.lastLoginTime = lastLoginTime
    },
    SET_LOGINTIME: (state, loginTime) => {
      state.loginTime = loginTime
    },
    SET_LOGINIP: (state, loginIP) => {
      state.loginIP = loginIP
    },
    SET_USERNAME: (state, userName) => {
      state.userName = userName
    },
    SET_USERID: (state, userID) => {
      state.roleType = userID
    },
    SET_LASTLOGINIP: (state, lastLoginIP) => {
      state.lastLoginIP = lastLoginIP
    },
    SET_ROLETYPE: (state, roleType) => {
      state.roleType = roleType
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    }
  },

  actions: {
    // 登录
    Login ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo).then(response => {
          const result = response.data
          console.log('有东西吗', result)
          storage.set(ACCESS_TOKEN, result.token, new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
          storage.set('USERNAME', result.username, new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
          commit('SET_TOKEN', result.token)
          commit('SET_ISINITPWD', result.isInitPwd)
          commit('SET_LOGINIP', result.loginIP)
          commit('SET_LOGINTIME', result.loginTime)
          commit('SET_LASTLOGINIP', result.lastLoginIP)
          commit('SET_LASTLOGINTIME', result.lastLoginTime)
          commit('SET_USERID', result.userID)
          commit('SET_USERNAME', result.username)
          const role = { id: 'admin', name: '管理员', permissions: [ { 'roleId': 'admin', 'permissionId': 'admin' } ] }
          role.permissionList = ['dashboard_admin', 'manage', 'accountm', 'document', 'document_admin', 'notice', 'notice_all', 'notice_uptwo', 'share', 'share_admin', 'feedback', 'feedback_admin', 'help']
          commit('SET_ROLES', result.role)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 登出
    Logout ({ commit, state }) {
      return new Promise((resolve) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          // commit('SET_ROLES', [])
          storage.remove(ACCESS_TOKEN)
          resolve()
        }).catch((err) => {
          console.log('logout fail:', err)
          // resolve()
        }).finally(() => {
        })
      })
    }

  }
}

export default user

sendya commented 1 year ago

用路由 Meta 里的这个属性，然后通用的路由守卫可以通过这个过滤

oraeorae commented 1 year ago

请问在permiss.js怎么获取到路由的权限呢，而且我这里已经是静态路由，还是可以用这个方法吗

oraeorae commented 1 year ago

已解决 src/modules/user.js（关键）

import storage from 'store'
import expirePlugin from 'store/plugins/expire'
import { login, getInfo, logout } from '@/api/login_api'
import { ACCESS_TOKEN } from '@/store/mutation-types'
// import { welcome } from '@/utils/util'

// 修改教程：https://zhuanlan.zhihu.com/p/431139611
storage.addPlugin(expirePlugin)
const user = {
  state: {
    token: '',
    isInitPwd: '',
    loginTime: '',
    loginIP: '',
    roleType: '',
    userName: '',
    userID: '',
    lastLoginTime: '',
    lastLoginIP: '',
    roles: []
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_ISINITPWD: (state, isInitPwd) => {
      state.isInitPwd = isInitPwd
    },
    SET_LASTLOGINTIME: (state, lastLoginTime) => {
      state.lastLoginTime = lastLoginTime
    },
    SET_LOGINTIME: (state, loginTime) => {
      state.loginTime = loginTime
    },
    SET_LOGINIP: (state, loginIP) => {
      state.loginIP = loginIP
    },
    SET_USERNAME: (state, userName) => {
      state.userName = userName
    },
    SET_USERID: (state, userID) => {
      state.roleType = userID
    },
    SET_LASTLOGINIP: (state, lastLoginIP) => {
      state.lastLoginIP = lastLoginIP
    },
    SET_ROLETYPE: (state, roleType) => {
      state.roleType = roleType
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    }
  },

  actions: {
    // 登录
    Login ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo).then(response => {
          const result = response.data
          console.log('有东西吗', result)
          storage.set(ACCESS_TOKEN, result.token, new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
          storage.set('USERNAME', result.username, new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
          commit('SET_TOKEN', result.token)
          commit('SET_ISINITPWD', result.isInitPwd)
          commit('SET_LOGINIP', result.loginIP)
          commit('SET_LOGINTIME', result.loginTime)
          commit('SET_LASTLOGINIP', result.lastLoginIP)
          commit('SET_LASTLOGINTIME', result.lastLoginTime)
          commit('SET_USERID', result.userID)
          commit('SET_USERNAME', result.username)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 获取用户信息
    GetInfo ({ commit }) {
      return new Promise((resolve, reject) => {
        // 请求后端获取用户信息 /api/user/info
        getInfo().then(response => {
          const result = response.data
          storage.set(ACCESS_TOKEN, result.token, new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
          storage.set('USERNAME', result.username, new Date().getTime() + 7 * 24 * 60 * 60 * 1000)
          commit('SET_TOKEN', result.token)
          commit('SET_ISINITPWD', result.isInitPwd)
          commit('SET_LOGINIP', result.loginIP)
          commit('SET_LOGINTIME', result.loginTime)
          commit('SET_LASTLOGINIP', result.lastLoginIP)
          commit('SET_LASTLOGINTIME', result.lastLoginTime)
          commit('SET_USERID', result.userID)
          commit('SET_USERNAME', result.username)
          let role = {}
          // 在这里配置路由以及权限
          if (result.roleType === '1') {
            role = { id: 'admin', name: '系统管理员', permissions: [ { 'roleId': 'admin', 'permissionId': 'admin' } ] }
            role.permissionList = ['dashboard_admin', 'manage', 'accountm', 'document', 'document_admin', 'notice', 'notice_all', 'notice_uptwo', 'share', 'share_admin', 'feedback', 'feedback_admin', 'help']
          } else if (result.roleType === '2') {
            role = { id: 'manage', name: '文档管理员', permissions: [ { 'roleId': 'manage', 'permissionId': 'manage' } ] }
            role.permissionList = ['dashboard_admin', 'manage', 'accountm', 'document', 'document_admin', 'notice', 'notice_all', 'notice_uptwo', 'share', 'share_admin', 'feedback', 'feedback_admin', 'help']
          } else if (result.roleType === '3') {
            role = { id: 'expert', name: '认证专家', permissions: [ { 'roleId': 'expert', 'permissionId': 'expert' } ] }
            role.permissionList = ['dashboard_admin', 'manage', 'accountm', 'document', 'document_admin', 'notice', 'notice_all', 'notice_uptwo', 'share', 'share_admin', 'feedback', 'feedback_admin', 'help']
          } else if (result.roleType === '0') {
            role = { id: 'user', name: '任课教师', permissions: [ { 'roleId': 'user', 'permissionId': 'user' } ] }
            role.permissionList = ['dashboard_admin', 'manage', 'accountm', 'document', 'document_admin', 'notice', 'notice_all', 'notice_uptwo', 'share', 'share_admin', 'feedback', 'feedback_admin', 'help']
          }
          commit('SET_ROLES', role)
          result.role = role
          // 下游
          resolve(result)
        }).catch(error => {
          reject(error)
        })
      })
    },

    // 登出
    Logout ({ commit, state }) {
      return new Promise((resolve) => {
        logout(state.token).then(() => {
          commit('SET_TOKEN', '')
          commit('SET_ROLES', [])
          storage.remove(ACCESS_TOKEN)
          resolve()
        }).catch((err) => {
          console.log('logout fail:', err)
          // resolve()
        }).finally(() => {
        })
      })
    }

  }
}

export default user

oraeorae commented 1 year ago

getInfo() 这里本来应该是token来登录返回的数据，后端暂时没给这个接口，所以我直接用login测试的，

import request from '@/utils/request'

const userApi = {
  Login: '/user/login',
  Logout: '/auth/logout',
  // get my info
  UserInfo: '/user/info',
  UserMenu: '/user/nav'
}

/**
 * login func
 * parameter: {
 *     username: '',
 *     password: '',
 *     remember_me: true,
 *     captcha: '12345'
 * }
 * @param parameter
 * @returns {*}
 */
export function login (parameter) {
  return request({
    url: userApi.Login,
    method: 'post',
    data: parameter
  })
}

export function getSmsCaptcha (parameter) {
  return request({
    url: userApi.SendSms,
    method: 'post',
    data: parameter
  })
}

export function getInfo () {
  return request({
    url: userApi.Login,
    method: 'post',
    data: {
      'userID': 'admin',
      'password': 'admin'
    }
  })
}

export function getCurrentUserNav () {
  return request({
    url: userApi.UserMenu,
    method: 'get'
  })
}

export function logout () {
  return request({
    url: userApi.Logout,
    method: 'post',
    headers: {
      'Content-Type': 'application/json;charset=UTF-8'
    }
  })
}

/**
 * get user 2step code open?
 * @param parameter {*}
 */
export function get2step (parameter) {
  return request({
    url: userApi.twoStepCode,
    method: 'post',
    data: parameter
  })
}

vueComponent / ant-design-vue-pro

请教不同权限不同菜单的问题 #1409