egg+vue实现登录功能【解决vue中登录的潜在问题】


前言

记忆在时间面前总是不堪一击!


本人的记录,下面内容仅供参考,如有什么什么,请自行解决。

一、cookie和session

不多赘述,详情请看 - https://www.eggjs.org/zh-CN/core/cookie-and-session

二、代码呈现

1.egg部门代码

// 登录
async login(data) {
    const { ctx, app } = this;
    try {
        if (ctx.session.data) {
            return this.success({ message: '请退出登录!' })
        }
        let user = await ctx.model.User.findOne({
            where: {
                userName: {
                    [Op.eq]: data.userName
                },
                password: {
                    [Op.eq]: utility.md5(data.password)
                },
                delete:{
                    [Op.eq]:0
                }
            }
        });
        if (user && user.password === utility.md5(data.password)) {
            // 密码正确,将通过jwt插件生成token,返回给前端
            const token = app.jwt.sign(
                { userName: data.userName },
                app.config.jwt.secret,
                {
                    expiresIn: "5h",// token的有效期,根据情况设置即可
                }
            );
            ctx.cookies.set('token', token)
            delete user.dataValues.password
            let roleId = user.dataValues.roleId;
            let roleInfo = await this.roleID(roleId)
            ctx.session.data = {
                userName: user.dataValues.userName,
                roleName: user.dataValues.roleName,
                administrator: user.dataValues.administrator,
                roleInfo: {
                    roleName: roleInfo[0].dataValues.roleName,
                    dataAuthority: roleInfo[0].dataValues.dataAuthority,
                },
            }
            return this.ctx.body = {
                data: { userInfo: user.dataValues, roleInfo: roleInfo[0].dataValues, token },
                message: "登陆成功!",
                code: 200,
            };
        } else {
            return this.ctx.body = {
                message: "登陆账号或密码错误!",
                code: 200,
            }
        }
    } catch (error) {
        return error.message;
    }
}
// 退出登录
async logOut() {
    const { ctx } = this
    try {
        const token = ctx.cookies.get('token', {
            maxAge: -1,
        });
        if (!ctx.session.data && !token) {
            return ctx.body={'已经登录'}
        }
        if (token) {
            ctx.cookies.set('token', '')
        }
        ctx.session.data = null;
        return ctx.body={'退出登录'}
    } catch (error) {
        return error.message
    }
}

2.vue代码

<script>
// npm i vue-cookie -S
import Cookies from 'vue-cookie'
export default {
  name: "App",
  data() {
    return {
    };
  },
  mounted() {
    window.onload = function() {
      if (!window.sessionStorage["ISlogin"]) {
        Cookies.delete("token");
        Cookies.delete("token.sig");
        Cookies.delete("EGG_SESS");
        location.reload(); //不能省,强制跳到登陆页
      } else {
        window.sessionStorage.removeItem("ISlogin");
      }
    };
    window.onunload = function() {
      window.sessionStorage["ISlogin"] = true;
    };
    window.onbeforeunload = function() {
      window.sessionStorage["ISlogin"] = true;
    };
  },
};
</script>

过程

以上代码为egg的实现,其实登录都可以了,但是在浏览器测试登录的时候,有一个问题就是退出登录之后cookie还是存在的,应该在首页的,可是打开项目还是在登录页,于是乎,那就想关闭标签或者关闭浏览器清除cookie ,那就在APP.vue中加入以下代码。在这里插入图片描述


版权声明:本文为weixin_44637104原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。