Vue2-全局前置守卫进行登录拦截/路由登录成功的重定向URL配置

最新推荐文章于 2024-07-25 15:43:10 发布

LxyingINGing

最新推荐文章于 2024-07-25 15:43:10 发布

阅读量800

点赞数 15

分类专栏： vue 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/LxyingINGing/article/details/135904402

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue项目中使用VueRouter防止页面重定向，以及设置路由前置守卫实现用户登录验证，通过fetch发送POST请求获取并存储token，确保用户权限管理。

摘要由CSDN通过智能技术生成

1. router----index.js

//解决跳转不让重定向问题
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject)
    return originalPush.call(this, location, onResolve, onReject);
  return originalPush.call(this, location).catch((err) => err);
};

// 路由前置守卫
router.beforeEach((to, from, next) => {
  // console.log(to.path);
  if (["/cart", "/order","/mine"].indexOf(to.path) != -1) {
    //判断用户是否登录
    const token = localStorage.getItem("token");
    if (token) next();
    else next(`/login?target=${to.path}`);
  } else {
    next();
  }
});

2. login.vue

methods: {
    //点击提交
    onSubmit(values) {
      fetch("https://v5.crmeb.net/api/login",{
        method:"POST",
        headers:{
           "Content-Type": "application/json",
        },
        body: JSON.stringify({
            account:values.acc,
            password:values.pwd,
        }),
      })
      .then(resp=>resp.json())
      .then(({data})=>{
        // console.log(data);
        localStorage.setItem("token",data.token);
        this.$router.replace(this.$route.query.target);
      });
    },
  },