开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第8天，点击查看活动详情

写在前面

上篇文章介绍了如何在vite+vue项目中使用vue3，以及vue3和vue2的一些区别，本篇文章介绍如何在vite+vue项目中编写路由权限验证

如果是跟着我的文章创建的项目的同学，现在打开项目进入到的是Home页面，页面上只显示Home字样，现在我们要改变路由的权限验证，使得没有token的话跳转到登录页面

路由的权限验证

打开router文件夹下的index.ts文件，将其代码改成如下代码，这里我们完善了路由拦截的代码：

import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes'
import { getToken, removeToken } from '@/utils/storage' // 修改的部分

export const router = createRouter({
    // hash模式：createWebHashHistory()，url上带#号，不需要后端配置
    // history模式：createWebHistory()，url上不带#号，需要后端配置
    history: createWebHashHistory(),
    routes
})

// 修改的部分
// 路由加载前，路由拦截，权限验证
router.beforeEach(async (to, from, next) => {
    const token = getToken()
    if (!token && to.path !== "/login") {
        next("/login");
    } else {
        if (to.path === "/login") {
            removeToken()
            next();
        } else {
            next();
            // 后面会补充拦截菜单的代码
        }
    }
})

以上代码通过router.beforeEach()方法实现路由拦截，对router.beforeEach()的原理感兴趣的同学可以自行去了解，这里我们只搭建项目。

代码说明：如果没有token并且不是要跳转到登录页，就把他拦截，并且跳转到登录页；如果有token就不进行拦截，有token并且是要跳转到登录页就移除token后跳转，有token并且不是要跳转到登录页，后面会补充根据登录用户菜单权限进行路由拦截的代码，现在是不进行拦截。

在上面的代码中引入了getToken和removeToken，这在我们的项目中还没有，所以在src目录下创建utils文件夹，并在该文件夹下创建storage.ts文件，storage.ts文件代码如下，使用localStorage的getItem()、setItem()、removeItem()方法获取、存储、删除token：

export const getToken = () => localStorage.getItem("token");
export const setToken = (val: any) => localStorage.setItem("token", val);
export const removeToken = () => localStorage.removeItem("token");

此时再打开项目会发现是进入到登录页面了，下篇文章我们编写开发登录页面的代码

写在最后

以上就是在vite+vue项目中编写路由权限验证的说明和代码