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

一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用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()
  }
})


你可能感兴趣的:(vue)