h5本地存储实现登录认证 sessionStorage localStorage meta

h5本地存储

• sessionStorage

  sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存

• localStorage

  localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存

• localStorage和sessionStorage使用时使用相同的API：

    localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
    localStorage.getItem("key");//获取名称为“key”的值
    localStorage.removeItem("key");//删除名称为“key”的信息。
    localStorage.clear();​//清空localStorage中所有信息
  

vue中路由meta实现登录认证

meta字段（元数据）
直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做登录校验再合适不过了

{
      path: '/main',
      name: 'main',
      meta: {requestAuth: true},
      component: Main,
      children: [{
          path: '/user/list',
          name: 'user_list',
          meta: {requestAuth: false},
          component: () => import('./views/user/List.vue')
        },
        {
          path: '/user/add',
          name: 'user_add',
          meta: {
            requestAuth: true
          },
          component: () => import('./views/user/Add.vue')
        },
        {
          path: '/user/update',
          name: 'user_update',
          meta: {
            requestAuth: true
          },
          component: () => import('./views/user/Update.vue')
        }
      ]
    }

/**
 * 全局前置守卫
 * 统一登录认证
 */
```javascript
router.beforeEach((to,from,next) => {
  console.log(`to => ${to.path}`); // 即将要进入的目标 路由对象
  console.log(`from => ${from.path}`); //from 当前导航正要离开的路由
//   第一种登录认证方法localStorage
//   if (to.path === '/login') {
//     next()
//   }else{
//     // alert('你还未登录，请登录');
//     if(!localStorage.getItem('user')) {
//       next({ path: '/login' })
//     }else{
//       next()
//     }
//   }
// })


//第二种登录认证方法meta
  const isAuth = to.matched.some(item =>item.meta.requestAuth);
  console.log(`isAuth = ${isAuth} type = ${typeof(isAuth)}`);
  if(!isAuth){
    next();
    return
  }
  const user = localStorage.getItem('user');
  if(!user){
    next({ path: '/login' });
    return;
  }
  next();

})