关于Vue中实现登录的简单操作

小华开发日记
关于Vue中的登录操作
以下是几个功能：
1.页面刷新权限要可以访问
2.退出登录后不能再进去到里面的页面

在这里的话我使用了Vuex和sessionstorage来实现，sessionstorage存数据能满足我们的刷新需求，下面直接上代码：

export default new Vuex.Store({
    state: {
        user: window.sessionStorage.getItem('user'), //pc后台的账号
        token: window.sessionStorage.getItem('token'), //pc端登录token
        },
            mutations: {
        //将token保存到sessionStorage里，token表示登陆状态
        SET_TOKEN: (state, data) => {
            state.token = data
            window.sessionStorage.setItem('token', data)
        },
        //获取用户名
        GET_USER: (state, data) => {
            // 把用户名存起来
            state.user = data
            window.sessionStorage.setItem('user', data)
        },
        //登出
        LOGOUT: (state) => {
            // 登出的时候要清除token
            state.token = null
            state.user = null
            window.sessionStorage.removeItem('token')
            window.sessionStorage.removeItem('user')
        }
    },
}）
        

上面的代码就是讲Vuex和sessionstorage来组装好
在登录的时候

            this.loading = true   //加载
            this.$refs.loginForm.validate(valid => {
                if(valid){
                    // 发送请求
                    apilogin({
                        userName:this.loginForm.username,
                        passWord:this.loginForm.password
                    }).then(res => {
                        if(res.data.success){
                            //登录成功
                            // console.log(res.data.data.token)
                            this.$store.commit('SET_TOKEN', res.data.data.token)
                            // this.$store.commit('GET_USER', res.data.user)
                            this.$message({
                            message: '登陆成功',
                            type: 'success'
                            })
                            //跳转到下一页
                            this.$router.push({path: '/pc'})
                        }
                    }).catch(err =>{
                        console.log(err)
                    })
                }
            })

在退出登录的操作

handlerback(){
            //退出登录
            this.$store.commit('LOGOUT')
            this.$router.push({
                path:'/login'
            })
        }

这样一个简单的登录就基本完成了