超清晰后台登录验证全局守卫的多种写法

 传统方法、路由元信息判断、数组形式判断

// 全局守卫  
引入vuex
router.beforeEach((to,from,next)=>{
  // 方法一
      if(store.state.loginData ){
        // 如果有登录信息
        if( to.name=='Login' || to.name=='Register' ){
          next('/')

        }else{
          next()
        }

      }else{
        // 如果没有登录信息 如果去的是登录页或者注册页就放行否则就让让他进登录页
        if( to.name=='Login'|| to.name=='Register'  ){
          next()
        }else{
          next('/login')
        }
      } 


  // 方法二 路由元信息
  // 给登录注册要放行的单个路由里面加上meta:{a:true}----->a是自定义名称
        // if(store.state.loginData  ){
        //   // 有登录信息
        //   if(to.meta.a){
        //     //  如果元信息为true 那就让它去主页
        //     next('/') 
        //   }else{
        //     next()
        //   } 
        // }else{
        //   // 没有登录信息
        //   if(to.meta.a){
        //     //  如果元信息为true 那就让它去主页
        //     next()

        //   }else{
        //     next('/login')
        //   } 
        // }

    // 方法三 数组形式 适用于多页面
    // 步骤：新建js 里面可写多个name 白名单，写要放行的name名
    //js文件内容： const loginlist=['Login','Register',...]
    // export default loginlist
    // 引入这个js文件 import
            // if(store.state.loginData){
            //   // 如果有登录信息 
            //   // 如果引入的js的loginlist中包含要去的登录页注册页面，那么就跳转主页否则放行
            //   if(loginlist.includes(to.name)){
            //     next('/')

            //   }else{
            //     next()
            //   } 

            // }else{
            //   // 没有路由信息
            //   // 如果包含要去的登录页注册页面 那么放行否则跳转到登录页
            //   if(loginlist.includes(to.name)){
            //     next()

            //   }else{
            //     next('/login')
            //   }
            // }
            
 
})

//注：每个页面没有name最好加上----》如：
export default { 
  name:'About',
    data() {
        return {};
    },
    created() {},
    methods: {},
    components:{}
};