简单而不平凡-登陆验证

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

第一种 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

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import index from "@/components/index"
 4 
 5 import page1 from "@/components/page1"
 6 import page2 from "@/components/page2"
 7 
 8 
 9 
10 Vue.use(Router)
11 let router = new Router({
12   routes: [
13     {
14       path: '/',
15       name: 'index',
16       component: index,
17       meta:{
18         title : "首页",
19         needLogin:false,
20 
21       }
22     },{
23       path:"/page1",
24       name : "page1",
25       component:page1,
26       meta:{
27         title:"page1",
28         needLogin:false,
29       }
30     },{
31       path:"/page2",
32       name : "page2",
33       component:page2,
34       meta:{
35         title:"page2",
36         needLogin:true,
37       }
38     }
39   ]
40 })
41 router.beforeEach((to,from,next) => {
42     document.title = to.meta.title;
43     if(to.meta.needLogin){
44       if(router.app.$options.store.state.loginModule.islogin){
45           next();
46       }else{
47         // 如果没登陆那么跳转
48         next('/');
49       }
50       
51     }else{
52       next();
53     }
54 })
55 
56 
57 
58 
59 
60 export default router;

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

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

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

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

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

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