Question

我在一个项目中，我首先为未登录的用户设置了防护措施。这意味着，如果发生对任何路由器的未经授权的访问，防护措施会将用户重定向到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()
                        })
                    }

到目前为止，它运行良好。但是，当出现某种情况时，它就无法正常工作。情况是这样的，假设我以admin身份登录，并且我的角色设置为1。现在，如果我输入localhost:8080/patient，它将进入耐心路由器。但是我不能允许以患者身份进入，因为患者角色为 2 ，但我的角色为 1 。为了解决这个问题，我在index.js文件中为每个父级设置了防护措施。首先，我从本地存储中的常量变量中获取authUser的值，然后根据用户的角色以及与每个角色相关联的父路由器名称为用户定义哈希表。然后，我使用beforeEnter路由器防护检查每个路由，如果条件为true，则转到下一个，否则将用户重定向到他来自的页面。代码如下。

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

我找不到为什么显示错误。有人可以帮忙吗？

VUE路由器中的导航卫士无法正常工作

0 个答案: