vue3 路由登录鉴权

vue yekong

数据可视化大屏项目中,需要添加一个登录功能,这时候我们就需要对那些登录后才能访问的页面进行鉴权处理了。

import {createRouter, createWebHashHistory} from 'vue-router'

const routerHistory = createWebHashHistory();
const router = createRouter({
    history: routerHistory,
    routes: [
        {
            path: '/',
            title: '首页',
            component: () => import('../view/home.vue'),
            meta: { requiresAuth: true } // 添加此标记表示该路由需要验证
        },
        {
            path: '/login',
            title: '登录',
            component: () => import('../view/login/index.vue')
        },
    ]
})

// 路由守卫
router.beforeEach((to, from, next) => {
    // 检查路由是否需要验证
    if (to.matched.some(record => record.meta.requiresAuth)) {
        // 判断 localStorage 中是否有 access_token
        if (localStorage.getItem('access-token')) {
            next(); // 有 token,继续访问
        } else {
            next('/login'); // 无 token,跳转到登录页
        }
    } else {
        next(); // 不需要验证的路由,直接继续
    }
})
export default router

喜欢