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

2024年1月20日 212次阅读 来源: 快醒醒

后台的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实例前使用

    原文作者：快醒醒
    原文地址: https://segmentfault.com/a/1190000019798107
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞