目录标题

  • vue登陆功能的实现
  • 实现步骤
  • Vuex存储登陆角色信息以及页面刷新数据重置、退出功能问题
  • 需求
  • 问题
  • 解决
  • 代码
  • 总结


vue登陆功能的实现

实现步骤

1、在router.js中 为首页以及登陆页加上元数据 例如

{
	path: '/login',
	component: () => {...},
	meta: {
		allowRequire: true //自定义参数 意思为允许访问
	}
}

//在最后使用全局守卫导航
router.beforeEach((to,from,next) => {
	if(!to.meta.allowRequire){//不允许游客身份访问
		if(localStorage.getItem('USER_SESSION')){//如果本地有user_session，代表登陆，放行
			next();
		}else{//没有就去登陆页面
			next({path: '/login'});
		}
	}else{//允许访问的页面不进行拦截
		next();
	}
})

Vuex存储登陆角色信息以及页面刷新数据重置、退出功能问题

需求

今天在写页面登陆功能，需要实现登陆跳转首页后用户信息显示功能。

问题

① 登陆成功后页面刷新，vuex中存储的信息被重新初始化，导致信息丢失。
② 通过localStorage.setItem()方法存储登陆信息，在用户退出后首页还是显示着用户信息。

解决

代码

//vuex中数据初始化写法
state: {
	//使用json.parse是因为localStorage存放的值只能是String类型
    userInfo: JSON.parse(localStorage.getItem('USER_SESSION')) || {},
    isLogin:  false
  },

//组件中的代码
	<el-menu-item v-if="!$store.state.isLogin" ...>
       登陆/注册
    </el-menu-item>
    <el-submenu v-else ...>
      //...
        <el-avatar :src="$store.state.userInfo.userAvatar"></el-avatar>
      //...
    </el-submenu>

解释：
userInfo这么写是因为
①在没有localStorage没有存放以USER_SESSION为键的数据时，被初始化为{}，即空对象。
②localStorage存储的键值对在没有手动清除的情况下是不会消失的，所以会一直保存在浏览器中，当新开页面访问首页时，localStorage中的对象赋值给userInfo初始化。解决了第一个问题
isLogin：
①这个变量存在的意义在于 当未登陆状态时 userInfo为{}空对象 作为组件中判断是否登陆的条件过于麻烦

第二个问题是由于我退出功能写的是退出后删除了localStorage中的键值对信息，但是是通过路由跳转的首页，路由跳转和页面刷新、< a >标签是不一样的。vue是单页面应用，路由跳转不改变vuex中的数据内容，但是页面刷新以及a标签的跳转是一个道理，相当于打开了一个新页面，此时vuex中存放的数据会重新初始化！

总结

所以在登陆的时候 需要用localStorage.setItem()设置键值对，类似token作用，然后更新vuex-state中的userInfo内容，isLogin改为true。
在退出时，使用localStorage.removeItem()删除键值对，对userInfo重新赋值为{}，isLogin为false。