Vue.js 实战系列之实现视频类WebApp的项目开发——18. 用户登录权限以及本地缓存的实现

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。

项目仓库地址，欢迎 Star

---

实现效果

未登录时跳转至登录页面：

---

功能实现

1. 路由权限（路由守卫）

   路由守卫：就是当前路由正在发生变化时，就会触发。vue-router 提供的导航守卫主要是用来通过跳转或者取消的方式来守卫导航路由，包括全局守卫、路由独享守卫、组件内守卫等几大部分，对这一块不太熟悉的小伙伴可以去官网看一下：Vue Router 官网

   简单的说，导航守卫就是路由跳转过程中的一些钩子函数。路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。类似于组件生命周期钩子函数

   在这里我们就不展开详细的来说啦，不熟悉的小伙伴可以去看一下官网，这一块还是很重要的。

2. 消息页面登录权限实现

   当我们没有登录时，点击消息页、我的页面时，都会跳转到登录页让你进行登录。那么，我们就可以借助 vue-router 的 路由元信息 meta 来实现，如果该路由的 mete 中配置了 requiresAuth: true 则需要登录，如果没有配置，则不需要登录限制。

   src/router/index.js 修改代码

   // 其他的部分不需要修改，只需要修改 news 和 mine 即可
     {
       path: '/',
       name: 'Home',
       component: Home,
       children: [
   	  // ...
         {
           path: '/news',
           name: 'news',
           component: () => import(/* webpackChunkName: "news" */ '../views/news/index.vue'),
           meta: {
             requiresAuth: true, // 是否需要登录权限
           },
         },
         {
           path: '/mine',
           name: 'mine',
           component: () => import(/* webpackChunkName: "mine" */ '../views/mine/index.vue'),
           meta: {
             requiresAuth: true, // 是否需要登录权限
           },
         },
       ],
     },
   

   在 index.js 添加代码

   // 其他的部分不需要修改，只需要修改 news 和 mine 即可
   import Vue from 'vue';
   import VueRouter from 'vue-router';
   
   Vue.use(VueRouter);
   
   const routes = [ ... ];
   
   const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes,
   });
   	
   // 设置登录权限，用户未登录时需要前往登录
   router.beforeEach((to, from, next) => {
     const { meta: { requiresAuth } } = to;
     if (requiresAuth) {
       next({ path: '/sign' });
     } else {
       next();
     }
   });
   
   export default router;
   

   此时就可实现当用户未登录时，进入这两个页面会跳转到登录页。

3. 获取用户登录状态

   还记得我们实现用户登录时在 vuex 中添加过一段代码：

   store/modules/sign.js

   actions: {
       // 登录操作
       sign({ state, commit, rootState }, params) {
           // 登录成功之后 session 中缓存登录标识
           sessionStorage.setItem('isLogin', JSON.stringify(true));
           // 登录成功之后 跳转到 webApp 主页
           router.replace({ path: '/' });
       },
   },
   

   当我们登录成功之后，会通过 sessionStorage 在缓存中写入一个 isLogin 来标记当前用户是否登录成功，这个时候我们就用到了这个内容。

   有小伙伴会问 localStorage 和 sessionStorage 有什么区别呢？
   相同点：作为 html5 中 Web Storage 的一种存储方式，localStorage 和sessionStorage 一样都是用来存储客户端临时信息的对象。
   区别：
   localStorage 用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
   sessionStorage 存储的数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。
   简单理解就是你在打开一个页面时记录 sessionStorage，当你把页面或者浏览器关闭时 session 中的数据即销毁，而 localStorage 存储的内容不会被销毁。

   看了上面的内容，是不是就知道下一步该干啥了。

   取出登录状态，并用于判断当前是否登录成功

   // 设置登录权限，用户未登录时需要前往登录
   router.beforeEach((to, from, next) => {
     const { meta: { requiresAuth } } = to;
     
     // 获取当前用户是否登录，登录成功为 true，其他为 null或false
     const isLogin = sessionStorage.getItem('isLogin');
     
     if (requiresAuth && !isLogin) {
       next({ path: '/sign' });
     } else {
       next();
     }
   });
   

---

总结

本章节主要实现路由权限的鉴定，需要注意以下几点：

• 守卫路由
• 路由元信息的使用
• 消息页面路由权限的实现
• 本地缓存 sessionStorage 的使用

---

上一章节： 17. 我的消息页面的实现

下一章节： 19. 发布页面的实现(摄像头调用，视频录制等功能)

项目整体介绍：Vue.js 项目实战之实现视频播放类WebApp的项目开发（仿抖音app）

---

项目仓库地址，欢迎 Star。

有任何问题欢迎评论区留言讨论。