diff --git a/src/permission.js b/src/permission.js index 63c7391..a945fdd 100644 --- a/src/permission.js +++ b/src/permission.js @@ -35,16 +35,35 @@ router.beforeEach(async(to, from, next) => { // get user info // note: roles must be a object array! such as: ['admin'] or ,['developer','editor'] const { roles } = await store.dispatch('user/getInfo') + // 判断页面是否可见 + const permissions = store.getters.userInfo.permissions + const allowed = to.meta.allowed || [] + let isVisible = false + if (allowed.length > 0) { + for (let i = 0; i < allowed.length; i++) { + if (permissions.includes(allowed[i])) { + isVisible = true + break + } + } + if (isVisible) { + next() + } else { + next('/403') + } + } else { + next() + } - // generate accessible routes map based on roles - const accessRoutes = await store.dispatch('permission/generateRoutes', roles) + // // generate accessible routes map based on roles + // const accessRoutes = await store.dispatch('permission/generateRoutes', roles) - // dynamically add accessible routes - router.addRoutes(accessRoutes) + // // dynamically add accessible routes + // router.addRoutes(accessRoutes) - // hack method to ensure that addRoutes is complete - // set the replace: true, so the navigation will not leave a history record - next({ ...to, replace: true }) + // // hack method to ensure that addRoutes is complete + // // set the replace: true, so the navigation will not leave a history record + // next({ ...to, replace: true }) } catch (error) { // remove token and go to login page to re-login await store.dispatch('user/resetToken') diff --git a/src/store/getters.js b/src/store/getters.js index 3fb5b06..c0929d1 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -12,6 +12,7 @@ const getters = { roles: state => state.user.roles, permission_routes: state => state.permission.routes, addRoutes: state => state.permission.addRoutes, - errorLogs: state => state.errorLog.logs + errorLogs: state => state.errorLog.logs, + userInfo: state => state.user.userInfo } export default getters diff --git a/src/store/modules/user.js b/src/store/modules/user.js index f27615b..0132948 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -6,25 +6,29 @@ const state = { token: getToken(), name: '', avatar: '', - introduction: '', - roles: [] + //introduction: '', + //roles: [], + userInfo: {} } const mutations = { SET_TOKEN: (state, token) => { state.token = token }, - SET_INTRODUCTION: (state, introduction) => { - state.introduction = introduction - }, - SET_NAME: (state, name) => { - state.name = name - }, - SET_AVATAR: (state, avatar) => { - state.avatar = avatar - }, - SET_ROLES: (state, roles) => { - state.roles = roles + // SET_INTRODUCTION: (state, introduction) => { + // state.introduction = introduction + // }, + // SET_NAME: (state, name) => { + // state.name = name + // }, + // SET_AVATAR: (state, avatar) => { + // state.avatar = avatar + // }, + // SET_ROLES: (state, roles) => { + // state.roles = roles + // } + SET_USERINFO: (state, userInfo) => { + state.userInfo = userInfo } } @@ -36,6 +40,7 @@ const actions = { login({ username: username.trim(), password: password }).then(response => { const { data } = response commit('SET_TOKEN', data.token) + commit('SET_USERINFO', data.userInfo) setToken(data.token) resolve() }).catch(error => { @@ -49,23 +54,30 @@ const actions = { return new Promise((resolve, reject) => { getInfo(state.token).then(response => { const { data } = response - - if (!data) { - reject('Verification failed, please Login again.') + if (!data || data.errcode !== 0) { + reject('验证失败，请重新登录！') } + const { userInfo } = data - const { roles, name, avatar, introduction } = data - - // roles must be a non-empty array - if (!roles || roles.length <= 0) { - reject('getInfo: roles must be a non-null array!') - } - - commit('SET_ROLES', roles) - commit('SET_NAME', name) - commit('SET_AVATAR', avatar) - commit('SET_INTRODUCTION', introduction) + commit('SET_USERINFO', userInfo) resolve(data) + + // if (!data) { + // reject('Verification failed, please Login again.') + // } + + // const { roles, name, avatar, introduction } = data.userInfo + + // // roles must be a non-empty array + // if (!roles || roles.length <= 0) { + // reject('getInfo: roles must be a non-null array!') + // } + + // commit('SET_ROLES', roles) + // commit('SET_NAME', name) + // commit('SET_AVATAR', avatar) + // commit('SET_INTRODUCTION', introduction) + //resolve(data) }).catch(error => { reject(error) }) @@ -76,8 +88,8 @@ const actions = { logout({ commit, state }) { return new Promise((resolve, reject) => { logout(state.token).then(() => { - commit('SET_TOKEN', '') - commit('SET_ROLES', []) + //commit('SET_TOKEN', '') + //commit('SET_ROLES', []) removeToken() resetRouter() resolve() @@ -91,33 +103,33 @@ const actions = { resetToken({ commit }) { return new Promise(resolve => { commit('SET_TOKEN', '') - commit('SET_ROLES', []) + //commit('SET_ROLES', []) removeToken() resolve() }) }, // Dynamically modify permissions - changeRoles({ commit, dispatch }, role) { - return new Promise(async resolve => { - const token = role + '-token' + // changeRoles({ commit, dispatch }, role) { + // return new Promise(async resolve => { + // const token = role + '-token' - commit('SET_TOKEN', token) - setToken(token) + // commit('SET_TOKEN', token) + // setToken(token) - const { roles } = await dispatch('getInfo') + // const { roles } = await dispatch('getInfo') - resetRouter() + // resetRouter() - // generate accessible routes map based on roles - const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true }) + // // generate accessible routes map based on roles + // const accessRoutes = await dispatch('permission/generateRoutes', roles, { root: true }) - // dynamically add accessible routes - router.addRoutes(accessRoutes) + // // dynamically add accessible routes + // router.addRoutes(accessRoutes) - resolve() - }) - } + // resolve() + // }) + // } } export default { diff --git a/src/utils/request.js b/src/utils/request.js index a9b8c18..aae1e2c 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -16,7 +16,8 @@ service.interceptors.request.use( // Do something before request is sent if (store.getters.token) { // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改 - config.headers['X-Token'] = getToken() + config.headers.authorization = 'Bearer ' + getToken() + //config.headers['X-Token'] = getToken() } return config }, @@ -41,7 +42,31 @@ service.interceptors.response.use( */ response => { const res = response.data - if (res.code !== 20000) { + if (res.errcode !== 0) { + Message({ + message: res.errmsg, + type: 'error', + duration: 5 * 1000 + }) + // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了; + if (res.code === 50008 || res.code === 50012 || res.code === 50014) { + // 请自行在引入 MessageBox + // import { Message, MessageBox } from 'element-ui' + MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', { + confirmButtonText: '重新登录', + cancelButtonText: '取消', + type: 'warning' + }).then(() => { + store.dispatch('user/resetToken').then(() => { + location.reload() // 为了重新实例化vue-router对象 避免bug + }) + }) + } + return Promise.reject('error') + } else { + return response; + } + /*if (res.code !== 20000) { Message({ message: res.message, type: 'error', @@ -64,7 +89,7 @@ service.interceptors.response.use( return Promise.reject('error') } else { return res - } + }*/ }, error => { console.log('err' + error) // for debug diff --git a/src/views/login/index.vue b/src/views/login/index.vue index da64333..3547a66 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -83,28 +83,30 @@ export default { name: 'Login', components: { LangSelect, SocialSign }, data() { - const validateUsername = (rule, value, callback) => { - if (!validUsername(value)) { - callback(new Error('Please enter the correct user name')) - } else { - callback() - } - } - const validatePassword = (rule, value, callback) => { - if (value.length < 6) { - callback(new Error('The password can not be less than 6 digits')) - } else { - callback() - } - } + // const validateUsername = (rule, value, callback) => { + // if (!validUsername(value)) { + // callback(new Error('Please enter the correct user name')) + // } else { + // callback() + // } + // } + // const validatePassword = (rule, value, callback) => { + // if (value.length < 6) { + // callback(new Error('The password can not be less than 6 digits')) + // } else { + // callback() + // } + // } return { loginForm: { username: 'admin', password: '111111' }, loginRules: { - username: [{ required: true, trigger: 'blur', validator: validateUsername }], - password: [{ required: true, trigger: 'blur', validator: validatePassword }] + // username: [{ required: true, trigger: 'blur', validator: validateUsername }], + // password: [{ required: true, trigger: 'blur', validator: validatePassword }] + username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }], + password: [{ required: true, trigger: 'blur', message: '密码不能为空' }] }, passwordType: 'password', loading: false,