项目场景：

例如：网页中有些页面需要登录后才能访问，有些页面不需要，我们需要在页面的前置路由设置白名单，过滤出白名单（不需要登录就可以访问的页面），判断是否需要登录，如果是，就跳到登录页面。

---

解决方案

在 src 下建立一个名为 permission 的 js 文件，在 main 中引入, 这个判断是否登录的思路是判断有没有cookie，至于cookie存在在哪，看自己的实际情况， permission 代码如下：

import router from "./router";
// 获取 cookie 的，如果你的cookie 存放在 localStorage ，就用相应的方法判断一下就好
import { getCookie} from "@/utils/auth";
// 这个是一个顶部进度条插件，安装命令: npm install nprogress -S
import NProgress from "nprogress";
import "nprogress/nprogress.css";

// 是否在右边显示一个转圈的动画
NProgress.configure({ showSpinner: false });

// 白名单（这里是根据路由名字判断的）
const whiteList = [ "home", "login","register"];

router.beforeEach(async (to, from, next) => {

  NProgress.start();
  
  // 有 cookie 这里的 key 值 根据自己的实际来
  if (getCookie("_TOKEN_")) {
    ["login","register"].includes(to.name) ? next({ path: "/" }) : next();
  } else {
    // 没有 cookie
    if (whiteList.includes(to.name)) {
      // 在免登录白名单，直接进入
      next();
    } else {
      if (getCookie("_TOKEN_")) {
        if (to.name === "login") {
          next({ path: "/" });
        } else {
          next();
        }
      } else {
        if (to.name === "login") {
          next(); // 否则全部重定向到登录页
        } else {
          // 没有登录，这里跳到登录页面
          next(`/login?redirect=${to.fullPath}`); // 否则全部重定向到登录页
        }
      }
    }
  }
});

router.afterEach(() => {
  NProgress.done();
});

router中路由写法要对应好名字，如：

const routes = [
  { // 首页
    path: "/home",
    name: "home",  // 这里的名字对用白名单的名字
    component: () => import("@/views/Home.vue"),
  },
  ...
];

最后在 main 中引入这个js文件

import "./permission";

跟进(最新写法 — 2023.4.1)

如果上面写法可能会有过多得 if 判断，那你可以试试这个写法

1. 在 router 下的 mate 中加一个属性， 这个名字随意，我这里用 requireAuth

const routes: Array<RouteRecordRaw> = [
 {
   path: '/test',
   name: 'test',
   component: () => import('@/views/test.vue'),
   meta: {
    // true 就代表着要鉴权，如果为 false 就不需要
     requireAuth: false,
     keepAlive: true,
   }
 }
]

2. 在 permission 中这么写

import router from './router'
import { getCookie } from '@/utils/auth'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 这个可以要也可以不要，主要是加载进读条
NProgress.configure({ showSpinner: false })

// 这个白名单主要是用于登录后访问一下路由后重定向会首页
const whiteList = ['login', 'register']

router.beforeEach(async (to, from, next) => {

  NProgress.start()
  
  // 判断有无登录，更具你自己的实际情况来
  if (getCookie('TOKEN')) {
    // 已经登录了，如果访问白名单内的路由则重定向回首页
    whiteList.includes(to.name) ? next({ path: '/' }) : next()
  } else {
    // 是否需要鉴权，这个就是在 router meta 声明的 requireAuth
    if (to.meta.requireAuth) {
      // 如果需要，就重定向到登录页
      next(`/login?redirect=${to.fullPath}`)
    } else {
      next()
    }
  }
})

// 路由跳转结束，关闭加载进度条
router.afterEach(() => {
  NProgress.done()
})