Я работаю над проектом, в котором я впервые установил охрану для пользователя, который не вошел в систему. Это означает, что в случае неавторизованного доступа к любому маршрутизатору охранники перенаправят пользователя на страницу 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](https://i.stack.imgur.com/BemoD.jpg)
Не могу найти причину появления ошибки. Кто-нибудь может помочь, пожалуйста?