vue实现页面权限显示_如何在vue中实现路由跳转判断用户权限功能？

实现这类校验有几个步骤。

1、设置路由是否需要校验的阀值。

// 路由配置的地方谁知阀值

routes:[

{

name:'admin',

path:'/admin',

component:'...,

meta:{

auth: true // 这里设置，当前路由需要校验

}

}

]

2、设置保存登陆态信息。

// store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

let modules = {

// 自己的模块代码 其它代码就不写了。。同vuex模块

state:{ authorizd:true },

getters:{

authorizd: state => state.authorizd

},

actions: {

login({commit},payload){

// ajax 登陆流程，

commit("login", 登陆信息)

}

},

mutations:{

login(state,loginInfo){

state.authorizd = loginInfo // 假定登陆成功后，设置 state.

}

}

}

export default new Vuex.Store({

modules: modules

})

3、路由跳转，校验

// 路由入口钩子函数

import store from 'store'

router.beforeEach((to,from,next) => {

if(to.matched.some( m => m.meta.auth)){

// 对路由进行验证

if(store.getters.authorizd) { // 已经登陆

next()

}else{

// 未登录,跳转到登陆页面，并且带上 将要去的地址，方便登陆后跳转。

next({path:'/login',query:{ referrer: to.fullPath} })

}

}else{

next()

}

})

上面代码是伪代码，主要是讲思路。。不要按部就班。。重在理解。