如何创建中间件或如何为前端和管理员管理以下路由

Posted 2023-02-23

【中文标题】如何创建中间件或如何为前端和管理员管理以下路由

【英文标题】：How to create a middleware or how to manage the below route for front end and admin

【发布时间】：2020-02-07 20:27:20

【问题描述】：

如何通过 Vue 中的中间件管理前台和管理面板的 url。

这是我在 router/index.js 文件中编写的代码：

const router = new VueRouter( mode: 'history', routes );

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

  // redirect to login page if not logged in and trying to access a restricted page
  const loggedIn = localStorage.getItem('usertoken') == null ? false : true;
  const user = JSON.parse(localStorage.getItem('user'));

  //this is for admin
  next('/admin/login')
  next('/admin/home');

  //this is my front URL
  next('/terms-condition');
  next('/home');
  next()
)
export default router;

【参考方案1】：

看看下面的代码可能对你有帮助

/** * 认证中间件 */

router.beforeEach((to, from, next) => 
// redirect to login page if not logged in and trying to access a restricted page
  const loggedIn = localStorage.getItem('usertoken') == null ? false : true;
  const user = JSON.parse(localStorage.getItem('user'));

  if (to.meta.portal == 'admin') 
    if (to.meta.auth) 
        if (!loggedIn) 
            next('/admin/login')
         else if (loggedIn) 
            next();
        
     else 
        if (!loggedIn) 
            next();
         else if (loggedIn) 
            if (user.role_id == '1') 
                next('/admin/home');
             else 
                next('/');
            
        

    
   else if (to.meta.portal == 'front') 

    if (loggedIn) 

        if (user.role_id == '1') 
            next('/admin/home');
         else 
            next('/');
        

     else if (!loggedIn) 
        if (to.path == "/admin") 
            next('/admin/login');
         else 
            next();
        
    
  
 next()
)

export default router;

您需要创建两个路由器文件，一个用于前端，另一个用于管理员：

//前面的路由文件会是这样的

export default [
path: '/',
meta:  auth: false, portal: 'front' ,
component: () => import('@/components/layouts/front/main.vue'),
children: [
    
        path: '/',
        name: 'front-home',
        title: 'Dashboard',
        meta:  auth: false, portal: 'front' ,
    
   ]
]

//管理路由器文件会是这样的

export default [
 
    path: 'user',
    name: 'users',
    title: 'Users',
    meta:  auth: true, portal: 'admin' ,
    component: () => import('@/components/templates/admin/user'),
 
]

主要区别在于门户定义了哪个门户将通过相应的路由访问。如果元内没有门户，它将无法工作。

【参考方案2】：

你实现的方式是正确的

一旦用户成功登录，使用 if else 条件重定向到管理面板，同时使用 vue-router 中给出的导航守卫

https://router.vuejs.org/guide/advanced/navigation-guards.html#per-route-guard

这有助于防止其他用户直接使用此网址