vue-router的访问权限管理

Z时代
2024-01-10
分类：综合

vue

路由守卫（路由钩子、拦截器）

router" title="vue-router">vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

可以不登录直接进入系统，但是访问指定位置需要登录

只有一级目录的情况下的拦截

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new Router({...});
# 需要登录才能访问/message路由,如果没有登录就调回到登录页面
router.beforeEach((to, from, next) => {
  let isLogin = false; // 默认没有登录
  if (!isLogin && to.path === '/message') {
    next('/login');
  } else {
    next();
  }
})

多级目录情况下的拦截

router.beforeEach((to, from, next) => {
  let isLogin = false; // 默认没有登录
  let matched = to.matched.some((item) => {
    return item.path === '/message';
  })
  if (!isLogin && matched) {
    next('/login');
  } else {
    next();
  }
})

直接在路由中设置拦截

# 路由配置
{
  path: '/message',
  meta: {
    login_required: false
  },
  component: Message,
  children: [
    {
      path: 'infos',
      component: MessageInfos
    }
  ]
}
# 拦截器配置
# 在单个路由中使用拦截
router.beforeEach((to, from, next) => {
  let isLogin = false; // 默认没有登录
  let matched = to.matched.some((item) => {
    return item.meta.login_required;
  })
  if (!isLogin && matched) {
    next('/login');
  } else {
    next();
  }
})

必须先登录才能进入系统

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new Router({...});
# 访问系统需要先登录
router.beforeEach((to, from, next) => {
  let isLogin = false; // 默认没有登录
  if (!isLogin && to.path !== '/login') {
    next('/login');
  } else {
    next();
  }
})

登录成功以后，不能访问登录、注册、找回密码页面

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new Router({...});
# 登录成功以后，不能访问登录、注册、找回密码页面
router.beforeEach((to, from, next) => {
  let isLogin = true; // 登录成功
  if (!isLogin && to.path !== '/login') {
    next('/login');
  } else {
    if(to.path === '/login'){
      next('/');
    } else {
      next();
    }
  }
})