使用vue-element-admin集成方案------登录篇(涉及部分Vuex知识)

   权限验证对于后台管理系统必不可少,不同的权限对应不同的路由,同时侧边栏也需要根据权限不同,异步生成.下面是登录和权限验证的思路.

•  登录:  前端将账号密码post到服务端进行验证,如果验证通过,服务端返回一个token,拿到token后(将token存入cookie中,保证刷新页面后记住用户的登录状态),根据token再去拉去一个user_info的接口来获取用户详情信息(如用户权限,用户名等等)
•  权限验证: 通过token获取用户对应的role,根据token再去获取用户对应的role,动态根据用户的role算出对应有权限的路由,通过router.addRoutes动态挂载这些路由.

   登录触发登录事件  ($store.dispatch参考下面的Vuex)

this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
  this.$router.push({ path: '/' }); //登录成功之后重定向到首页
}).catch(err => {
  this.$message.error(err); //登录失败提示错误
});

 Vuex

Vuex是为Vue.js应用程序开发的状态管理模式,采用集中式存储管理应用的所有组件的状态,并且用相应的规则保证状态以一种可预测的方式发生变化.

• 状态管理模式(举个栗子,简单的Vue计数应用开始)

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

 状态自管理应用包含以下几个部分:

state: 驱动应用的数据源;

view: 以声明方式将state映射到视图

actions: 响应在view上的用户输入导致状态变化

Vuex应用的核心是store(仓库).''store"基本上是一个容器,它包含着应用中大部分的状态(state).Vuex和单纯的全局对象有两点不同:

• Vuex的状态存储是响应式的.当Vue组件从store中读取状态,如果store中的状态改变,那么响应的组件也会相应的更新.
• 无法直接改变store中的状态,改变store中的状态需要显式的提交(commit)变化(mutation).这样我们可以方便跟踪每一个状态的变化

创建一个store(示例)

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

可以通过store.state来获取状态对象,通过store.commit方法触发状态变更:

store.commit('increment')

console.log(store.state.count) // -> 1

 dispatch: 含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值)

 commit: 同步操作,写法:this.$store.commit('mutations方法名',值)

 由于store中的状态是响应式的,在组件中调用store中的状态仅需在计算属性中返回就行.触发变化

仅仅是在组件的methods中提交mutation(具体参考vuex相关文档)

action:

LoginByUsername({ commit }, userInfo) {
  const username = userInfo.username.trim()
  return new Promise((resolve, reject) => {
    loginByUsername(username, userInfo.password).then(response => {
      const data = response.data
      Cookies.set('Token', response.data.token) //登录成功后将token存储在cookie之中
      commit('SET_TOKEN', data.token)
      resolve()
    }).catch(error => {
      reject(error)
    });
  });
}

登录成功后服务端返回一个token(token是一个能唯一标示用户身份的一个key),然后将

token存储在本地的cookie中(或者localstorage)

获取用户信息

用户登录成功后在全局钩子router.beforeEach中拦截路由,判断是否已获得token,获得token之后我们就要去获取用户的基本信息

//router.beforeEach
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
  store.dispatch('GetInfo').then(res => { // 拉取user_info
    const roles = res.data.role;
    next();//resolve 钩子
  })

store.getter:Vuex允许在store中定义"getter"(可以认为是store的计算属性),getter的返回值会根据依赖被缓存

起来,当依赖值发生改变才会重新计算.

Getter 接受state作为第一个参数:

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

通过属性访问

Getter会暴露为store.getters对象.你可以以属性的形式访问这些值

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter可以接受其他getter作为第二个参数

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

store.getters.doneTodosCount // -> 1

 可以在其他组件中使用它:

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

通过方法访问

可以让getter返回一个函数,实现给getter传参

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

getter在通过方法访问时,每次进行调用,不会缓存结果

mapGetters辅助函数

mapGetters将store中的getter映射到局部计算属性:

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

Module

因为使用单一状态树,所有状态集中在一个比较大的对象中(store对象会变臃肿)

Vuex将store分割成模块(module),每个模块有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

Vuex暂时就用这么多,剩下的下回再说