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

最新推荐文章于 2025-06-02 09:03:06 发布

Servenity

最新推荐文章于 2025-06-02 09:03:06 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： Vue-router vue路由拦截

本文链接：https://blog.youkuaiyun.com/Servenity/article/details/80607143

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用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() 
　　} 
})