简单而不平凡-登陆验证

近来闲来无聊，随手写了一下登陆验证，挑选了两种比较方便的方式，奉献给大家

第一种 vue+localStorage

router.beforeEach((to, from, next) => {

// 不需要验证的路由
  if (to.path == '/login' || to.path == "/registration" || to.path == "/callme" || to.path == '/about' || to.path == '/join') {

    next()
    if (to.meta.title) {
      document.title = to.meta.title
    }
  } else {

    if (window.localStorage.hasOwnProperty('pailewang_token')) {

      if (JSON.parse(window.localStorage.getItem('pailewang_token')).hasOwnProperty('isLogin')) {

        if (JSON.parse(window.localStorage.getItem('pailewang_token')).isLogin) {

          next();
          if (to.meta.title) {
            document.title = to.meta.title
          }
        } else {
          router.replace('/login');
          document.title = '欢迎登陆拍乐网'
        }
      } else {
        router.replace('/login');
        document.title = '欢迎登陆拍乐网'
      }
    } else {
      router.replace('/login');
      document.title = '欢迎登陆拍乐网'
    }

  }

})

　　思路：这种方式通过判断localstorage中是否包含我们指定的token。如果有则是登陆的，如果没有则是没有登陆的。

　　优劣：这种方式不需要vuex，可以直接从if中看到不需要登陆的页面，但是这种做法，我们有时记不住路由对应的页面，还要去上面看看，对代码的运行也是比第二种更加多，

但是这么做我们可以更方便的修改哪个页面是否需要登陆

第二种 vue+vuex

import Vue from 'vue'
import Router from 'vue-router'
import index from "@/components/index"

import page1 from "@/components/page1"
import page2 from "@/components/page2"



Vue.use(Router)
let router = new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index,
      meta:{
        title : "首页",
        needLogin:false,

      }
    },{
      path:"/page1",
      name : "page1",
      component:page1,
      meta:{
        title:"page1",
        needLogin:false,
      }
    },{
      path:"/page2",
      name : "page2",
      component:page2,
      meta:{
        title:"page2",
        needLogin:true,
      }
    }
  ]
})
router.beforeEach((to,from,next) => {
    document.title = to.meta.title;
    if(to.meta.needLogin){
      if(router.app.$options.store.state.loginModule.islogin){
          next();
      }else{
        // 如果没登陆那么跳转
        next('/');
      }
      
    }else{
      next();
    }
})





export default router;

思路逻辑：通过meta中needLogin来进行判断这个页面是否需要login 在导航守卫中进行判断 

如果需要登陆的话，那么我们就去跳转到登陆页就好了，如果不需要那么可以直接去下一个页面

优劣：再看路由中可以更方便的看出是否需要登陆，比较直观，但是我们还要去引入vuex 当然写到

localStorage也是可以的。但是不管怎么说虽然直观，但会增大代码的长度。

github项目链接：https://github.com/JinZhenZon/loginCheck

最后有问题请加我qq:15274527,希望前端更崛起