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