vue-router vue-x 实现状态改变 拦截路由

本文介绍如何使用Vue和Vuex管理用户的登录状态,包括通过改变token值标识登录状态、设置受保护路由及实现路由跳转前的身份验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex);

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

var state = {
token:0,
//初始时候给一个 token=0 表示用户未登录
};

const mutations = {
change(state,data){
state.token = data;
}

};

二丶在用户登录时改变登录状态;

this.$store.commit('change','1') //登录后改变登录状态 token = 1 ;

三、设置需要校验的路由

{path: '/home',
name: "home",
meta: {requireAuth: true}, // 添加该字段,表示进入这个路由是需要登录的
}

四、路由跳转校验

router.beforeEach((to,from,next) => {
if(to.matched.some( m => m.meta.auth)){
// 对路由进行验证
if(store.state.login=='1') { // 已经登陆
this.$router.push({ path:'/home',}); // 正常跳转到你设置好的页面
}else{
// 未登录则跳转到登陆界面,query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来;
this.$router.push({ path:'/login',});
     }
    }else{
      next()
  }
})


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值