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實例前使用