Vue之beforeEach非登录不能访问完整代码亲测可以

后台的 php 请求就是接收这两个参数
login.vue

<template>
<div class=''>
    <input type="text" v-model="name" />
    <input type="password" v-model="password" />
    <button type="primary" @click="submitForm"><router-link :to="{path:'/'}"> 提交 </router-link></button>
</div>
</template>
 
<script>
import axios from 'axios';
 export default {data(){
        return{
        name:'',
        password:'',
        }
    },
    methods:{submitForm:function(){var params = new URLSearchParams();
    params.append('name', this.name);
    params.append('password',this.password);
        axios({
        method: 'post',
        url: '/api/bbb.php',
        data:params
        }).then((resp)=>{sessionStorage.setItem('token',resp.status)// localStorage
            // 以 key value 的形式将值存放到 sessionStorage 中。console.log(resp);
           }).catch((error)=>{console.log(error);
  })
     }
    }
  }
</script>
 

router

    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta:{requireAuth:true}
    },

main.js

router.beforeEach((to, from, next) => {console.log(to);
  console.log(from);
  console.log(sessionStorage.getItem('token'))
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if(sessionStorage.getItem('token')){ // 判断 sessionStorage 是否存在 token
      alert("已经登录了")
      next();}else{
      // 防止死循环
      alert("暂时未登录")
      if (to.path === '/login') {next();
        return
      }else{
          next({path: '/login',});
  }
    }
  }
  else {next();
  }
  /* 如果本地 存在 token 则 不允许直接跳转到 登录页面 */
  if(to.fullPath == "/login"){if(localStorage.getItem('token')){
      next({path:from.fullPath});
    }else {next();
    }
  }
});

注意一定要在 router 实例前使用