Vue学习记录-状态管理

要解决的问题

平时的系统开发中，基本都会碰到这个权限问题，需要根据用户的登录状态进行处理。最常见的情况就是“先登录，后使用”。除去打包成APP，无法看到连接外，如果地址栏里直接输入地址就能绕过登录的话，那就忒不安全了。

 

方案1：自己做一个状态管理

具体的代码，我删掉了，所以这里只陈述一下过程

1. main.js里面，加一个var user = {didLogin:false}，并在methods中添加一个方法changeUserAuth(isLogin){ user.didLogin = isLogin; }；

2. main.js里面，添加路由beforeEach，通过判断user.didLogin，进行next()或者next({name:'login})；

3. 子页面中如果要修改这个状态的话，通过方法进行修改，this.$root.changeUserAuth(true)；

 

方案2：vuex

正规军的做法，就是vuex了，通过他统一对全局变量进行管理。说一下具体的用法

1. 安装

　　npm i vuex --save

2. 创建store.js（/ProjectPaht/src/vuex/store.js），并定义types（/ProjectPaht/src/vuex/types.js）

/*  store.js  */

import Vue from 'vue'
import Vuex from 'vuex'

import user from './modules/user'  //用户

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user,
  }
})

/*  types.js  */

// 用户权限
export const USER_INFO_UPDATE = 'USER_INFO_UPDATE';

 

3. 定义各个模块的数据（user.js）

import * as types from '../types'

const USER_INFO = 'userInfo';

const state = {
  // 用户登录信息
  userInfo: JSON.parse(localStorage.getItem(USER_INFO) || '{}'),
}

const actions = {
  /**
   * 用户登录
   */
  userLogin({commit}, res) {
    localStorage.setItem(USER_INFO, JSON.stringify(res));
    commit(types.USER_INFO_UPDATE, res);
  },

  /**
   * 退出登录
   */
  userLogout({commit}) {
    localStorage.removeItem(USER_INFO);
    commit(types.USER_INFO_UPDATE, {});
  },
}

const getters = {
  userInfo: state => state.userInfo,
  didLogin: state => state.userInfo.userid.length > 0,
}

const mutations = {
  [types.USER_INFO_UPDATE](state, res) {
    state.userInfo = res
  },
}

export default {
  state,
  actions,
  getters,
  mutations
}

3. 更改store数据

<script>
  ...
  import {mapActions} from 'vuex';

  export default {
    ...
    methods: {
      ...mapActions({
        userLogin: 'userLogin',  //vues/modules/user.js中定义的方法
        userLogout: 'userLogout'
      }),
      // 登录
      onPressLogin: function () {
        let param = {
          username: this.username,
          password: this.password,
        }
        api.POST('api/account/login', param).then(data=> {
          let user = {userid:'wzf'}; //data.data;

          // 更新state
          this.userLogin(user);

          // 页面跳转
          this.$router.push({name: 'home'});
        });
      }
    }
  }
</script>

页面跳转以后，就会执行到main.js的路由beforeEach中去了

...
import router from './router'
import store from './vuex/store'
import {mapState} from 'vuex'

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: {
    App,
  },
  computed: mapState({
    userInfo: ({user}) => user.userInfo, //从user.js中获取信息用于判断是否登录
  }),
  methods: {
    checkAuth: function () {
      let {userid = ''} = this.userInfo;
      return userid.length > 0; //这里做的比较简单，只是通过userid进行的判断
    }
  }
})



router.beforeEach((to, from, next) => {
  // 如果不是登录页面
  if (to.name != 'login') {
　　 if (!router.app.checkAuth()) {
      next({name: 'login'});
      return;
    }
  }
  next();
});

 

最后理一下数据流向

1. 页面通过接口调用接口，完成账号验证；

2. 通过vuex修改store，这里具体起作用的是vuex/modules/user.js；

3. 进行页面跳转，会被router.beforeEach拦截，通过对store的判断，具体完成跳转（到登录、到下个页面）

 

因为之前用了Redux，所以vuex直接就用上了，没有任何难度。关于vuex的具体用法，还是参照一下官方文档吧 https://vuex.vuejs.org/