Vue 使用Vuex做一个用户状态验证

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

我对这个东西的理解就是,这个是一个动态的全局变量。。。所以其实我想用localStorage或者sessionStorage,被否了,说是因为不安全。

首先你得对这个插件有一些了解,至少安装,结构,如何获取值要明白,http://doc.liangxinghua.com/vue-family/4.1.html

这个需求总结起来就是,访问后台页面及其子页面的时候要登录,如果没登录就跳到login页面登录,退出登录后也跳到登录页面,关闭所有相关的窗口之后默认user已经退出。
首先,我们假设网站有很多的全局变量,所以按照模板组的写法来,这样维护好维护,添加也好添加;store/index.js文件内容如下

然后开始写这个模块的属性;store/modules/user-status.js 内容如下

到这里,全局变量就算注册好了;开始配置路由router/index.js:dashboard就是后台入口页面,给它加了一个meta,requireLogin为true,意思是这个页面要验证,访问这个页面的子页面时,会默认应用到这个属性

在main.js下加入以下内容,通过router.beforeEach判断页面meta的requireLogin是否为true
to.matched.some(m => m.meta.requireLogin这个写法我尝试的时候发现是可以在parent页面指定需要登录,然后子页面就也需要登录;后来直接换成了to.meta.requireLogin不纠结。

然后就是,login页面,登录成功,设置全局属性userStatusVal为true,登出则设置全局属性userStatusVal为false

login页面

logout页面

这些事情做完之后,你发现,一开始直接访问的页面,不会跳转,点击去其它页面,倒是没问题了,这个时候在dashboard-index文件下加入以下代码

最终,我在main.js中是这样写的,login页面登录,登录成功就保存全局变量和localStorage,这样访问需要登录的页面时,先查全局变量,不存在就差localStorage,还不存在就只能去login页面了;logout的时候清除全局变量和localStorage。(localStorage相关的我就不在这里写了)

The end…