vue3 中 vue-router 路由守卫

1. 介绍

vue3 中 vue-router 验证登录权限和修改文档标题

2. 示例

router.ts:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import store from '@/store/store';
import { SYSTEM_NAME } from '@/commons/configs/constants';

const routes: Array<RouteRecordRaw> = [
  { path: '/', redirect: 'home' },
  {
    path: '/login', name: 'Login', component: () => import('@/views/login/Login.vue'), meta: { title: 'Login' },
  },
  {
    path: '/home', name: 'Home', component: () => import('@/views/home/Home.vue'), meta: { title: 'Home' },
  },
  { path: '/*', component: () => import('@/views/not-found/NotFound.vue'), meta: { title: '404' } },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

router.beforeEach((to, from, next) => {
  const title = to.meta.title as string;

  setDocumentTitle(title);

  if (to.name === 'Login') {
    next();
    return;
  }

  if (isAuthenticated()) {
    next();
    return;
  }

  next({ name: 'Login' });
});

export default router;

// --

function isAuthenticated() {
  return Boolean(store.state.USER_INFO.token);
}

function setDocumentTitle(name: string) {
  let title = SYSTEM_NAME;

  if (name) {
    title = `${name} | ${SYSTEM_NAME}`;
  }

  document.title = title;
}

3. 参考

• vue3的七种路由守卫使用大全 (opens new window)