Vue.js根据用户类型进行路由加载 [英] Vuejs route loading based on user type

问题描述

我将在所有组件中返回用户类型，但是我需要在我的路线中添加对它的验证，不确定该怎么做.

I am returning user type in all my components but i need to add validation of it in my routes, not sure how to.

这是我的route.js文件，其中在meta

This is my route.js file where the routes i need users to be authenticated are defined in meta

import Vue from "vue";
import VueRouter from 'vue-router';
import store from './store';
Vue.use(VueRouter);

const router = new VueRouter({
    mode: "history",
    routes: [
        // ADMIN ROUTES
        {
            path: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            meta: {
                requiresAuth: true,
                layout: 'admin'
            }
        },
    ]
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
      if (!store.getters.isLoggedIn) {
        next({
          name: 'login'
        })
      } else {
        next()
      }
    } else {
      next()
    }
  })

router.afterEach((to, from) => {
    Vue.nextTick(() => {
        document.title = to.pageTitle || 'CC';
    });
});

export default router;

如您所见，我有requiresAuth: true,仅允许经过身份验证的用户访问此路由，我还需要添加另一个值，该值表示if user type == admin，这样并非所有登录的用户都可以访问该路由，而只有管理员可以访问.

As you can see I have requiresAuth: true, which only allows authenticated user to access this route, I also need to add another value which says if user type == admin that way not all logged in users can access to such route but only admins.

这是我登录的用户信息，可以在所有组件中访问并包含type值

This is my logged user info which is accessible in all components and is included type value

如何向路由元添加用户类型?

How can I add user type to routes meta?

注意

我的类型值可以是这三个条件之一

my type value can be one of this 3 conditions

1. 管理员(管理员角色)
2. 客户(任何其他用户角色)
3. 未定义(未分配角色的用户)

1. admin (admins role)
2. customer (any other user role)
3. undefined (user with no role assigned)

更新

忘记提及我的所有组件中都具有此功能

Update

Forgot to mention that in all my components I also have this function

beforeRouteEnter (to, from, next) {
  const token = localStorage.getItem('access_token')
  return token ? next() : next('/login')
},

这只是检查我的用户是否基于localStorage

This simply check if my user is logged in based on saved token in localStorage

我也试图在类似下面的代码的组件函数中获取用户类型，但返回的this.$store未定义

I've also tried to get my user type in component function like code below, but is returned this.$store is undefined

beforeRouteEnter (to, from, next) {
    if (this.$store.getters.loggedUser.type != 'admin') {
        next({
            name: 'home'
        })
    } else {
        next()
    }
}

推荐答案

组件实例this在beforeRouteEnter 一种执行所需操作的方法是在管理路由中添加另一个元属性，并检查具有admin: true的每条路由的用户类型.

One way to do what you want is to add another meta attribute to your admin routes and check the user type for each route that has admin: true.

您的路由器代码如下所示:

Your router code would look something like this:

const router = new VueRouter({
    mode: "history",
    routes: [
        // ADMIN ROUTES
        {
            path: '/dashboard',
            name: 'dashboard',
            component: Dashboard,
            meta: {
                requiresAuth: true,
                layout: 'admin',
                admin: true
            }
        },
    ]
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!store.getters.isLoggedIn) {
            next({
                name: 'login'
            })
        } 
    }
    if (to.matched.some(record => record.meta.admin)) {
        if (store.getters.loggedUser.type !== 'admin') {
            // Do something if the user is not an admin
            // maybe redirect to a forbidden page
        }
    }
    next() 
})

这篇关于Vue.js根据用户类型进行路由加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！