如何在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()
}
})
上面代码是伪代码，主要是讲思路。。不要按部就班。。重在理解。