16. Vue 登录存储

存储方法：第一种（Vuex）（PS：刷新就清空时使用或者使用eventBus全局变量也行。）第二种（sessionStorage）（PS：刷新不清空关闭窗口才清空时请用。）第三种（localStorage）（PS：关闭浏览器都不清空时才使用。）

在此之前呢，先简单了解下他们的操作使用吧！

　　sessionStorage的操作：

　　　　设置：sessionStorage.setItem('userData')

　　　　获取：sessionStorage.getItem('userData')

　　　　清除：sessionStorage.clear('userData')

　　localStorage的操作：

　　　　设置：localStorage.setItem('userData')

　　　　获取：localStorage.getItem('userData')

　　　　清除：localStorage.removeItem('userData')

做登录存储时呢，网上看了很多参考，最后结合这些跟自己的理解整理了一下详细如下(仅供参考)（另外呢说明一下，我这里采用的是vuex的方法但值是以sessionStorage来存储赋值）：

　　目录：（创建store文件夹，再创建store.js文件）

　　main.js文件下：

　　store.js文件下：（我这里的变量userData变量的值采用的sessionStorage方法，也可换成常量或者locaStorage方式。）

 1 import Vue from "vue";
 2 import Vuex from "vuex";
 3 Vue.use(Vuex);
 4 
 5 export default new Vuex.Store({
 6     state: {
 7         userData: sessionStorage.getItem('userData') ? sessionStorage.getItem('userData') : ''
 8     },
 9     getters: {
10 
11     },
12     mutations: {
13         setUserData: (state, userData) => {
14             state.userData = userData;
15             sessionStorage.setItem('userData', JSON.stringify(userData));
16         },
17     }
18   });

　　login.vue中登录成功后：

　　　　1.调用setUserData方法修改state中变量userData的值：this.$store.commit('setUserData',res.data);

　　　　2.跳转页面之前呢，先做个判断，判断用户是否登陆（即使用 router.beforeEach 注册一个全局前置守卫）

　　　　　　router文件夹下的index.js文件中代码如下：

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 
 4 import Login from '@/components/Login/Login'        //登录界面
 5 
 6 Vue.use(Router)
 7 
 8 const router = new Router({
 9   mode: 'history',  //去除地址路径后的#号
10   routes: [
11     // {
12     //   path: '/',
13     //   name: 'HelloWorld',
14     //   component: HelloWorld
15     // },
16     {
17       path: '/',
18       name: 'Login',
19       component: Login,
20       meta: {
21         isLogin: false
22       }
23     },
24   ]
25 });
26 
27 // 导航守卫
28 // 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
29 router.beforeEach((to, from, next) => {
30   if (to.path === '/') {
31     next();
32   } else {
33     //非跳转到登录界面时，判断本地存储userData是否为null或空，为空则跳回到登录界面，反之到相应的界面(此时有数据)。
34     let userData = JSON.parse(sessionStorage.getItem('userData'));
35     if (userData === null || userData === '') {
36       next('/');
37     } else {
38       next();
39     }
40   }
41 });
42  
43 export default router

　　3.跳转到主页面：this.$router.push({path:'../index',query:{data:res.data}});　　　　//此处的query可有可无

　　4.进入到主页后，从store中取出用户的信息userData,并判断是否需要转为对象，再赋值用户的个人中心，　

 1  // console.log(JSON.parse(sessionStorage.getItem('userData')))
 2  // console.log(typeof(this.$store.state.userData))
 3 
 4   let userData;
 5   if(typeof(this.$store.state.userData) == 'object'){
 6          userData = this.$store.state.userData;
 7   }else{
 8          userData = JSON.parse(this.$store.state.userData);
 9   }
10

　　如果有修改个人信息的操作，则在其执行成功后调用store.js文件中的state下的userData变量并判断是否为对象类型来是否进行转为对象操作，修改其中需要修改的参数并赋上最新值，并刷新个人信息：

　　（ps：我这里是修改手机号）

 1 let newUserDate;
 2 if(typeof(this.$store.state.userData) == 'string'){
 3  　　newUserDate = JSON.parse(this.$store.state.userData);
 4 }else{
 5 　　 newUserDate = this.$store.state.userData;
 6 }
 7 newUserDate.mobileNo = this.ruleForm.phoneNumber;　　//修改其中参数的值

 8 this.$store.commit('setUserData',newUserDate);　　　　//使用该方法调用setUserData更新userData的值
 9 this.$refs.head_child.getPersonalInfo();　　　　　　　 //刷新个人信息

　　退出登录时呢：

　　　　 1 sessionStorage.clear('userData'); //清空sessionStorage中名为userData的值 　　2 this.$router.push({path: "/"}); //回到登录界面

ok，到此为止呢，登陆存储功能算是实现了。。。

猜你喜欢