vue+element-ui搭建迷你电商平台系列篇（九）

这是我参与11月更文挑战的第24天，活动详情查看：2021最后一次更文挑战

接上一篇juejin.cn/post/703453…

大家好，本篇文章是搭建迷你电商平台系列的最后一篇了，主要是讲首页的权限验证和注销功能实现，下面直接进入正题。

0. 进入首页的权限验证

   我们这个home页正常来说是需要登录之后访问的，但我们现在这个页面在浏览器直接输入127.0.0.0.1就能直接访问到，不需要进行登录，这样是不行的。我们需要加一个权限校验，如果没有通过校验的话需要让用户先进行登录，校验通过了才把页面展示给用户；所以我们要在第一时间就开始校验，不能等页面渲染出来了才校验登录状态这里使用vue的第一个生命周期函数beforeCreate () 这个函数是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它，在这个阶段data 和 methods 中的 数据都还没有初始化

     beforeCreate() {
       const token = localStorage.getItem('token')
       if (!token) {
         this.$router.push({name: 'Login'})
       }
     },
   

   我们这里就先简单判断一下localStorage里有没有token值就好了，先做个形式，后面在来校验token的值对不对,包括上面的导航，目前都是前端写死的，后面我们会从后端接口获取，一步一步来搞

1. 注销功能实现

   还记得上面的注销按钮吗，当时写了一个注销的a标签，并且绑定了点击事件handleSignOut，我们在继续完成这个方法；

   在上面的 beforeCreate()后面继续写methods

     methods: {
       handleSignOut(){
         localStorage.clear()
         this.$message.success("退出成功")
         this.$router.push({name:'Login'})
       }
     }
   

   清除localStorage完事～

   好啦，本系列到这里就结束啦，本人也是非常舍不得。本系列更新了很多篇，内容非常丰富，当然也有很多内容没有讲到，比如cookie的存储，一些关键字段如何缓存到前端，这些也是我比较感兴趣的，后续可能会出相关的文章，喜欢就关注下呀。