VUE后台管理系统(四) 用户,权限和菜单-526互联

原理分析

- 服务器根据不同的用户,返回不同的"路由信息","菜单信息","按钮信息"等待
- 从而实现不同的登录用户,看到的页面不一样(部分相同,部分不同)
- 前端这边,路由不再写死(写死的话,每个用户看到的页面都是一样的)
	- 而是根据后端返回的"路由信息"来填充"router数据",最终实现效果

查看后端返回的数据

### views.login.index.vue
......
handleLogin() {
  this.$refs.loginForm.validate(valid => {
	if (valid) {
	  ......
	  // 派发action
	  this.$store.dispatch('user/login', this.loginForm).then(() => { // 派发action
		this.$router.push({ path: this.redirect || '/' })
		this.loading = false // 恢复按钮默认样式
	  }).......
  })
}

### store.modules.user.js
......
getInfo({ commit, state }) {
	return new Promise((resolve, reject) => {
	  getInfo(state.token).then(response => {
		const { data } = response
		console.log(data) // 输出后端返回的数据
		......
	})
},

- {routes: Array(227), buttons: Array(76), roles: Array(4), name: 'admin', avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'}
	- avatar: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
	- buttons: (76) ['cuser.detail', 'cuser.update', 'cuser.delete', 'btn.User.add', 'btn.User.remove', 'btn.User.update', 'btn.User.assgin', 'btn.Role.assgin', 'btn.Role.add', 'btn.Role.update', 'btn.Role.remove', 'btn.Permission.add', 'btn.Permission.update', 'btn.Permission.remove', 'btn.Activity.add', 'btn.Activity.update', 'btn.Activity.rule', 'btn.Coupon.add', 'btn.Coupon.update', 'btn.Coupon.rule', 'btn.OrderList.detail', 'btn.OrderList.Refund', 'btn.UserList.lock', 'btn.Category.add', 'btn.Category.update', 'btn.Category.remove', 'btn.Trademark.add', 'btn.Trademark.update', 'btn.Trademark.remove', 'btn.Attr.add', 'btn.Attr.update', 'btn.Attr.remove', 'btn.Spu.add', 'btn.Spu.addsku', 'btn.Spu.update', 'btn.Spu.skus', 'btn.Spu.delete', 'btn.Sku.updown', 'btn.Sku.update', 'btn.Sku.detail', 'btn.Sku.remove', '试试', 'wef', '钱钱钱', '3123', 'qwe', '123', 'btn.User.add', '21321', 'b', 'btn.User.', 'btn.User.', '12', 'adfsdgs', 'fgdg', 'hjhjhj', 'dfdf', 'sdgfdsf', '111', 'tttttt', '11', 'llll', 'ihyyhu', '22', '123', 'test2', 'test2', 'aaa', 'Abtn.A', 'Bbtn.B', 'TEST_BTN3', '333', 'functionaaaaaaaaaaaaaaaaaaaaaaaaaaaaa', '12345', '22', '12']
	- name: "admin"
	- roles: (4) ['string', '平台管理员', '业务员', '产品经理']......

再次分析框架自带的登录逻辑

### store.modules.user.js
......
getInfo({ commit, state }) {
	return new Promise((resolve, reject) => {
	  getInfo(state.token).then(response => {
		const { data } = response
		console.log(data)
		if (!data) {
		  return reject('Verification failed, please Login again.')
		}
		
		// 仅仅获取了name和avatar,对于本项目来说,是不够的
		// 比如还需要获取"routes","buttons"等待信息,所以这里需要修改一下逻辑
		const { name, avatar } = data
		commit('SET_NAME', name)
		commit('SET_AVATAR', avatar)
		resolve(data)
	  }).catch(error => {
		reject(error)
	  })
	})
},


### store.modules.user.js
......
const mutations = {
  ......
  // 注释掉
  // SET_NAME: (state, name) => {
  //   state.name = name
  // },
  // SET_AVATAR: (state, avatar) => {
  //   state.avatar = avatar
  // }
  
  // 新增
  SET_USERINFO:(state,userInfo)=>{
    state.name = userInfo.name;
    state.avatar = userInfo.avatar;
    state.routes = userInfo.routes;
    state.buttons = user.buttons;
    state.roles = userInfo.roles;
  }

}

const actions = {
  ......

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response
        console.log(data)
        if (!data) {
          return reject('Verification failed, please Login again.')
        }
		
		// 注释掉
        // const { name, avatar } = data
        // commit('SET_NAME', name)
        // commit('SET_AVATAR', avatar)
		// 新增
        commit('SET_USERINFO',data)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

  ......