vue路由跳转权限拦截判断
全局钩子函数:Vue.beforeEach(function(to,form,next){})/*在跳转之前执行*/Vue.afterEach(function(to,form))/*在跳转之后判断*/参数说明:to:router即将进入的路由对象from:当前导航即将离开的路由next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 co...
·
全局钩子函数:
Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/
Vue.afterEach(function(to,form)) /*在跳转之后判断*/
参数说明:
to:router即将进入的路由对象
from:当前导航即将离开的路由
next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。
afterEach函数不用传next( )函数。
路由函数:
const router = new VueRouter({
routes: [ {
path: '/login',
component: Login,
beforeEnter: (to, from, next) => {
// ...
},
beforeLeave: (to, from, next) => {
// ...
}
}
]
})
不同角色的进入显示不同的页面
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'
Vue.use(Router)
let routerMap = [
{
path: '/',
redirect:'/login',
component: Login,
},
{
path:'/admin',
name:'admin',
component: admin,
meta: {
requireAuth: true, // 表示进入这个路由是需要登录的
type: ['admin'] // 表示只有管理员才能进入当前页面
},
},
{
path:'/user',
name:'user',
component: user,
meta: {
requireAuth: true, // 表示进入这个路由是需要登录的
type: ['user'] // 表示只有用户才能进入当前页面
},
},
{
path:'/public',
name:'public',
component: public,
meta: {
requireAuth: true, // 表示进入这个路由是需要登录的
type: ['user','admin'] // 表示用户和管理员都可以进入当前页面
},
},
]
let route = new Router({
routes: routerMap
})
router.beforeEach((to, from, next) => {
// 判断该路由是否需要登录权限
if (to.matched.some(record => record.meta.requireAuth)) {
// 判断当前的user是否登录
let login = router.app.$options.store.state.publics.userislogin
if (login === 1) {
let adminType = router.app.$options.store.state.publics.adminType
// 判断当前登录类型
console.log(to.matched.some(record => record.meta.type.indexOf(adminType) > -1))
if (to.matched.some(record => record.meta.type.indexOf(adminType) > -1)) {
next()
}
} else {
next({
path: '/'
})
}
} else {
next()
}
})
export default route;
更多推荐
已为社区贡献6条内容
所有评论(0)