Vue.js学习——Vuex和登陆拦截

学习
vue.js

什么是Vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
类似于使用一种全局变量的方式来管理state。

使用Vuex实现登陆拦截

  1. 在main.js引用vuex,并定义一个store对象，把store对象提供给store选项，可以把store实例注入所有的子组件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    import Vue from 'vue';
    Vue.use(Vuex);

    const store = new Vuex.Store({
        state: {
            token: false
        },
        mutations: {
            login(state) {
                state.token = true
                sessionStorage.setItem("isLogin", true);
            },
            logout(state) {
                state.token = false
                sessionStorage.setItem("isLogin", false);
            }
        }
    })

    new Vue({
        el: '#app',
        router,
        store,
        components: {App},
        template: '<App/>'
    })

  2. 在路由配置的地方给需要增加路由拦截的页面增加一个属性requireAuth

    1
    2
    3
    meta: {
        requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
    },

  3. 在进行路由之前，先判断是否有这个需要验证权限的字段，如果有的话就验证store中state里面提供验证的字段的值，验证成功才执行next(),否则就跳转回登陆界面。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    router.beforeEach((to, from, next) => {
        if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
            if (store.state.token) {  // 通过vuex state获取当前的token是否存在
                next();
            }
            else if(sessionStorage.getItem('isLogin')){
                next();
            }
            else {
                next({
                    path: '/login',
                })
            }
        }
        else {
            next();
        }
    })

  4. 在登陆和登出的时候，使用store中定义的mutations方法修改state中的值。

    1
    this.$store.commit('login');     //改变token状态

vuex store的刷新问题

实际中遇到一个问题，点击刷新的时候重新回到登陆页面。
原因是因为刷新之后store被重新初始化了。
解决方法是把状态保存在localStorage或sessionStorage里面。

localStorage和sessionStorage

webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage。
localStorage生命周期是永久，这意味着除非用户显式在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。
sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

1
2
3
4
localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值
localStorage.removeItem("key");//删除名称为“key”的信息。
localStorage.clear();//清空localStorage中所有信息

localStorage和sessionStorage使用时使用相同的API

生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。但Cookie需要程序员自己封装。