如何在 vuejs 中实现基于角色的身份验证？答案

【问题标题】：How can i implement Role based authentication in vuejs?如何在 vuejs 中实现基于角色的身份验证？
【发布时间】：2019-06-19 03:37:23
【问题描述】：

VueJs 有自己的路由器，所以我们无法实现中间件。相反，我们使用导航保护来限制用户访问某些页面。我的项目有两个用户，一个是客户，另一个是工人。我不希望工作人员访问客户端的页面和客户端访问工作人员的页面。我现在面临的问题是如何在那里编写代码。阅读文档对我没有帮助。这是我的 routes.js 代码

const routes =[
    {
        path:'/login',
        name: 'login',
        component: Login
    },
    {
        path:'/signup',
        name:'signup',
        component: Signup
    },
    {
        path:'/user/dashboard',
        name:'userdashboard',
        component: Dashboard,
        meta:{
            requiredAuth: true,
            client: true,
            worker: false
        }
    },
    {
        path:'/verifyemail',
        name:'verifyemail',
        component: Verifyemail
    },
    {
        path: '/logout',
        name: 'logout',
        component: Logout
    },
    {
        path: '/worker/Dashboard',
        name:'workerDashboard',
        component: WorkerDashboard,
        meta:{
            requiredAuth: true,
            client: false,
            worker: true
        }
    }
];

const router = new Router({
    routes,
    mode: 'history'
});

router.beforeEach((to,from,next)=>
    {
    if(to.matched.some(record => record.meta.requiredAuth) && !Store.state.isLoggedIn )
    {
        next({name: 'login'});
        return
    }

   if(to.path === '/login' && Store.state.isLoggedIn)
    {
        next({name:'userdashboard'});
        return
    }

    if(to.path === '/signup' && Store.state.isLoggedIn)
    {
        next({name:'userdashboard'});
        return
    }


   next()
});

在我的登录组件中

axios.post('http://127.0.0.1:8000/api/signin', { email: this.email, password: this.password}, { headers: { 'X-Requested-with': 'XMLHttpRequest' } })
                    .then((response) => {
                        const token = response.data.token;
                        localStorage.setItem('token', token);
                        this.loadinglogin = false;
                        store.commit('loginUser');
                        const UserType = response.data.userType;
                        if(UserType === '1'){
                            app.$router.push({name: 'userdashboard'});
                        }else if(UserType === '2'){
                            app.$router.push({name: 'workerDashboard'})
                        }else{
                            return 'not ok';
                        }

                    })
                    .catch((error) => {
                        console.log(error.response.data.error);
                        this.errored = true;
                        this.error= error.response.data.error;
                        this.loadinglogin = false
                    })

【问题讨论】：

更好地处理服务器端的角色基础访问控制 (RBAC)。因为您所有的 Vue 应用程序都对任何人开放（您可以检查 js 代码等）。看看 Laravel RBAC 包。 github.com/Zizaco/entrust

标签： javascript laravel vue.js

【解决方案1】：

不确定问题是什么，但您可以从您的 API 中获取该组并将其放入您的商店。然后添加一些 getter，检查 beforeEach() 中的值并相应地重定向。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        if (!store.getters.isAdmin) {
          next(false)
        }
      }
    }
  ]
})

正如@Tarasovych 提到的，这不会取代服务器端身份验证/授权。它只是增加了用户友好性。在返回任何数据之前，您仍然需要对每个请求进行身份验证/授权。

【讨论】：