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()
}
})
上面代碼是偽代碼，主要是講思路。。不要按部就班。。重在理解。
總結
以上是生活随笔為你收集整理的vue路由跳转权限_如何在vue中实现路由跳转判断用户权限功能？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python参数默认值实例_Python
- 下一篇： 3 ie兼容 vue_前端开发：MVVM