路由鉴权

梗概

• 使用meta字段来指定需要鉴权。然后通过beforeEach[use::路由守卫]来检查用户的登录状态以及路由的鉴权要求

示例

以下是一个基本的路由鉴权实现示例：

1. 首先，安装 Vue Router 库：

 npm install vue-router

1. 在 Vue 应用中设置路由规则和导航守卫。假设我们有两个需要鉴权的路由：/dashboard 和 /profile。

 import Vue from 'vue';
 import VueRouter from 'vue-router';
 ​
 Vue.use(VueRouter);
 ​
 const router = new VueRouter({
   routes: [
     {
       path: '/',
       redirect: '/dashboard',
     },
     {
       path: '/dashboard',
       component: Dashboard,
     },
     {
       path: '/profile',
       component: Profile,
       meta: { requiresAuth: true },
     },
   ],
 });
 ​
 // 添加导航守卫
 router.beforeEach((to, from, next) => {
   const isAuthenticated = true; // 假设这里有一个表示用户登录状态的变量
 ​
   // 如果路由需要鉴权
   if (to.meta.requiresAuth) {
     // 如果用户已登录，继续导航
     if (isAuthenticated) {
       next();
     } else {
       // 用户未登录，重定向到登录页面
       next('/');
     }
   } else {
     // 路由不需要鉴权，直接导航
     next();
   }
 });
 ​
 export default router;