请教不同权限不同菜单的问题
oraeorae opened this issue · 4 comments
oraeorae commented
请教一下想要不同权限不同菜单应该怎么实现？
我后端返回的只有身份类型，比如（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
用路由 Meta 里的这个属性，然后通用的路由守卫可以通过这个过滤
oraeorae commented
请问在permiss.js怎么获取到路由的权限呢，而且我这里已经是静态路由，还是可以用这个方法吗
oraeorae commented
已解决
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 useroraeorae commented
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
})
}