如何在vuejs中實現基於角色的身份驗證？

Question

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
                    })

Answer 1

不確定問題是什么，但是您可以從API中獲取組並將其放入商店。 然后添加一些吸氣劑，檢查beforeEach()的值並進行相應的重定向。 例如：

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

正如@Tarasovych所提到的，這不能代替服務器端的身份驗證/授權。 它只是增加了用戶友好性。 在返回任何數據之前，您仍然需要對每個請求進行身份驗證/授權。