Навигационная охрана в vue-router не работает - PullRequest
0 голосов
/ 30 октября 2019

Я работаю над проектом, в котором я впервые установил охрану для пользователя, который не вошел в систему. Это означает, что в случае неавторизованного доступа к любому маршрутизатору охранники перенаправят пользователя на страницу login. Код приведен ниже.

Код для пользователя, который не вошел в систему:

    router.beforeEach((to,from,next) => {
    if(to.meta.requiresAuth) {
        const authUser = JSON.parse(window.localStorage.getItem('authUser'))
        if(authUser && authUser.access_token){
            next()
        }
        else{
            next({name: 'login'})
        }
    }
        next()
    });

Здесь роль - это один из элементов объекта authUser, который я установил припользователь входит в систему. Если он авторизован для входа, я устанавливаю для него некоторые учетные данные для дальнейшего использования. роль является одним из них. Я установил значение роли для admin, doctor, receptionist, patient как 1,2,3,4 соответственно. Код приведен ниже.

Код для входа в систему

      const postData = {
                        grant_type: 'password',
                        client_id: clientId, 
                        client_secret: clientSecret,
                        username: self.login.email,
                        password: self.login.password,
                        scope: ''
                    }
                    self.$http.post(loginUrl, postData)
                    .then(response => {
                        const authUser = {
                        }
                        if(response.status === 200){
                                // console.log('Oauth Token',response)

                                authUser.access_token = response.data.access_token
                                authUser.refresh_token = response.data.refresh_token
                                window.localStorage.setItem('authUser', JSON.stringify(authUser))

                                self.$http.get(userUrl, {headers: getHeader()})
                                .then(response => {

                                    if(response.body.email_verified_at !== null){

                                        if(response.body.role === '1'){
                                            authUser.id = response.body.id
                                            authUser.email = response.body.email
                                            authUser.role = 1
                                            window.localStorage.setItem('authUser', 
                                                     JSON.stringify(authUser))
                                            self.$router.push({path: 'admin'})
                                        }
                                        else if(response.body.role === '2'){
                                            authUser.doctor_id = response.body.doctor_id
                                            authUser.id = response.body.id
                                            authUser.email = response.body.email
                                            authUser.department = response.body.department
                                            authUser.role = 2
                                            window.localStorage.setItem('authUser', 
                                                      JSON.stringify(authUser))
                                            self.$router.push({path: 'doctor'})
                                        }
                                        else if(response.body.role === '3'){
                                            authUser.role = 3
                                            authUser.id = response.body.id
                                            authUser.receptionist_id = response.body.receptionist_id
                                            window.localStorage.setItem('authUser', 
                                                            JSON.stringify(authUser))
                                            self.$router.push({path: 'receptionist'})
                                        }
                                        else if(response.body.role === '4'){
                                            authUser.id = response.body.id
                                            authUser.patient_id = response.body.patient_id
                                            authUser.role = 4
                                            window.localStorage.setItem('authUser', 
                                                        JSON.stringify(authUser))
                                            self.$router.push({ path: 'patient'})
                                        }
                                    }
                                    else{
                                        self.confirmYourEmail()
                                    }

                                }).catch((e)=>{
                                    console.log(response)
                                })
                            }
                        }).catch((e)=>{
                            console.log(e)
                            self.failedModal()
                        })
                    }

Пока все работало нормально. Но когда возникла ситуация, она не работает должным образом. Ситуация, скажем, я вошел в систему как администратор, и моя роль установлена ​​на 1. Теперь, если я наберу localhost:8080/patient, то он входит в маршрутизатор пациента. Но я не должен позволять вводить в качестве пациента, поскольку роль пациента 2 , а моя роль 1 . Чтобы решить эту проблему, я установил защиту для каждого родителя в файле index.js. Сначала я беру значение authUser из локального хранилища в постоянной переменной, а затем определяю хеш-таблицу для пользователя в соответствии с его ролью и именем родительского маршрутизатора, связанным с каждой ролью. Затем я проверяю для каждого маршрута, используя beforeEnter router guard, если условие истинно, оно переходит к следующему, иначе оно перенаправляет пользователя на страницу, с которой он пришел. Код приведен ниже.

const authUser = JSON.parse(window.localStorage.getItem('authUser'))

var roleshash = {1: 'admin', 2: 'doctor', 3: 'receptionist', 4: 'patient'}


 {
    path: '/admin', //sidebar
    component: Sidebar,
    beforeEnter: (to, from, next) => {
        if (authUser.role === 1) {
          next();
        }
        else {
            Swal.fire({
                type: 'error',
                title: 'Access Denied!',
                text: 'Unauthorized access occured'
            })
            next({ path: '/' + roleshash[authUser.role] })
        }
    },
    children: [

        {
            path: '',
            component: Dashboard,
            name: 'dashboard',
            meta: {requiresAuth: true}
        }
    ]
}

После установки этого защитного устройства, если я хочу войти в систему, отображается сообщение об ошибке Cannot read property 'role' of null

Screenshot of error

Не могу найти причину появления ошибки. Кто-нибудь может помочь, пожалуйста?

...