vue页面锁屏的完美解决方法记录

更新时间：2022年06月06日 15:58:01 作者：呵呵的牛

锁屏是指用户暂时离开时点击锁屏,用户无法跳转到其他页面,回来输入密码点击解锁,下面这篇文章主要给大家介绍了关于vue页面锁屏的完美解决方法,需要的朋友可以参考下

vue实现页面锁屏完美解决

最新写项目客户要求写一个锁屏功能。静下心来，慢慢看，相信你会有收获的。

功能点

1.禁止浏览器返回按钮。

2.手动输入路由会强制跳到锁屏页面。

3.必须输入正确密码或者重新登录该系统。

思路：锁屏的思路从登录开始在登录的时候拿到密码使用md5对密码加密，然后存到vuex或者浏览器本地存储，然后新建锁屏页面，如下图。在锁屏页面输入密码对锁屏页面输入的密码进行MD5加密，加密后把登录的时候存到本地存储的密码对比。两个密码一样的话就成功了可以跳到首页，反之则密码错误，仍然在锁屏页面。

上面图片为对登录的密码进行md5加密

附：md5加密方法

安装插件 js-md5

?
1
npm install js-md5 -S
登录后复制免费讲解

使用

一、全局挂载

第一步在main.js中引入md5，并挂载到vue的原型上

?
1
2
import md5 from 'js-md5'
Vue.prototype.$md5 = md5
登录后复制免费讲解

第二步使用

?
1
this.$md5('这里是需要进行md5加密的内容')
登录后复制免费讲解

二、局部，某个页面使用

直接在js中引入md5，直接使用即可

?
1
2
import md5 from 'js-md5'
console.log(md5('这里是需要进行md5加密的内容'))
登录后复制免费讲解

<div class="right-menu-item" style="cursor: pointer"  @click="lockScreen">
         <i class="el-icon-lock" style="font-weight:700;"></i>
       </div>
     // 锁屏：
   lockScreen() {
     this.$router.push('/screen')
   },

登录后复制免费讲解

上面的代码就是点击锁屏按钮跳转路由到锁屏页面。

1.禁止浏览器返回按钮

在main.js里面加上下面的代码

    //禁止浏览器上一步下一步
window.addEventListener('popstate', function() {
  history.pushState(null, null, document.URL)
 })

登录后复制免费讲解

在 router/index.js里面加上 scrollBehavior: () => {
history.pushState(null, null, document.URL)
}这个代码

export default new Router({
  mode: 'history', // 去掉url中的#
  // scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
  scrollBehavior: () => {
    history.pushState(null, null, document.URL)
  }
})

登录后复制免费讲解

2.书写锁屏页面和相关路由

下面代码为screen/index.js 为锁屏的页面首先进入这个页面默认执行一次 unlock方法里面的localStorage.setItem(“newlockPassword”, md5(this.userForm.newPw));

把解锁的密码存到本都对象存储里面，这样路由就好做处理。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

    <template>
  <div class="app">
    <el-form class="userInfo">
      <div class="body-icon">
      </div>
      <div class="title-icon">
      </div>
      <div class="box">
        <img src="../../assets/logo/logo.png" class="lock-avatar" />
      </div>
      <el-form-item>
        <el-row style="margin-left: 100px">
          <el-col :span="2">
          </el-col>
          <el-col :span="12" class="lock-nickName">{{ nickName }}</el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="userForm.newPw"
          placeholder="请输入登陆密码"
          type="password"
          auto-complete="off"
          @keyup.enter.native="unLock()"
          show-password
        >
          <div slot="prefix" style="margin-left: 3px">
            <i class="el-icon-lock"></i></div
        ></el-input>
      </el-form-item>
      <el-form-item>
        <div style="text-align: center; color: #1890ff">
          <a @click="logout">退屏重新登录</a>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width: 100%"
          @click="unLock"
          ><i class="el-icon-unlock"></i>解锁</el-button
        >
        <!-- <el-button
          circle
          type="primary"
          plain
          icon="el-icon-unlock"
          @click="unLock"
        ></el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      userForm: {
        newPw: "",
        user: "",
      },
      loading: false,
    };
  },
  methods: {
    unLock() {
      let oldAuct = localStorage.getItem("lockPassword");
      localStorage.setItem("newlockPassword", md5(this.userForm.newPw));
      console.log(oldAuct, localStorage.getItem("newlockPassword"), "999990");
      if (this.userForm.newPw === "" || this.userForm.newPw === undefined) {
        return;
      } else if (md5(this.userForm.newPw) != oldAuct) {
        this.userForm.newPw = "";
        this.$notify.error({
          title: "错误",
          message: "解锁密码错误，请输入登陆密码解锁",
          duration: 1500,
        });
        return;
      } else {
        setTimeout(() => {
          this.$notify.success({
            title: "解锁成功",
            duration: 1500,
          });
          this.$router.push("/index");
          this.userForm.newPw = "";
        }, 500);
      }
    },
    async logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let password = localStorage.getItem("lockPassword");
        localStorage.setItem("newlockPassword", password);
        this.$store.dispatch("LogOut").then(() => {
          location.href = "/login";
        });
      });
    },
  },
  mounted() {
    this.unLock();
  },
};
</script>
 
<style lang="scss" scoped>
.app {
  // background-image: url("../../assets/images/back.png");
  background-size: 100%; // 背景图片大小最大
  height: 100%; //宽、高也最大
  width: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-color: skyblue; //一定要设置背景颜色
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1500;
  .userInfo {
    // display: flex;
    background: #ffffff;
    // height: 300px;
    width: 400px;
    padding: 25px 25px 5px 25px;
    .title-icon {
      width: 120px;
      height: 20px;
      margin-bottom: 22px;
    }
    .body-icon {
      width: 500px;
      height: 120px;
      position: absolute;
      margin-left: -152px;
      margin-top: -166px;
    }
    .box {
      display: flex;
      justify-content: center;
      align-items: center;
      .lock-avatar {
        width: 100px;
        height: 100px;
        border-radius: 100px;
       
      }
    }
 
    .lock-nickName {
      margin-top: -2px;
      font-size: 14px;
      font-weight: 560;
      text-align: center;
    }
    .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
  }
}
</style>

登录后复制免费讲解

下面图片为router/index.js 新增锁屏路由

3.在router.beforeEach()路由首首位加上以下代码

下面的代码意思是对开始登录的MD5加密密码和 锁屏页面的MD5密码 不相等并且将要去的路由不是screen 则直接跳到 screen这个页面。

这样的话只要点击锁屏按钮进入 screen锁屏页面返回禁止了，路由里面输入路由也不会生效。

   /**
   * 判断锁屏
   */
   //登录的时候存的md5加密的密码
let oldPasswordld = localStorage.getItem("lockPassword");
//锁屏页面的md5加密密码
let newlockPassword = localStorage.getItem("newlockPassword");
console.log(oldPasswordld,newlockPassword)
  if (newlockPassword !== oldPasswordld && to.path !== '/screen') {
  next('/screen')
  }

登录后复制免费讲解

4.实现退出锁屏重新登录

下面代码在screen/index.js里面退出锁屏重新登录

let password = localStorage.getItem(“lockPassword”);
localStorage.setItem(“newlockPassword”, password);

注意：退出锁屏的时候需要把本地的首次登录的密码赋值给锁屏界面的密码否则退出不了锁屏页面。

<el-form-item>
       <div style="text-align: center; color: #1890ff">
         <a @click="logout">退屏重新登录</a>
       </div>
     </el-form-item>
    async logout() {
     this.$confirm("确定注销并退出系统吗？", "提示", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
       type: "warning",
     }).then(() => {
     //退出锁屏的时候需要 把本地的首次登录的密码 赋值给锁屏界面的密码 否则退出不了 锁屏页面。然后调用vuex退出方法
       let password = localStorage.getItem("lockPassword");
       localStorage.setItem("newlockPassword", password);
       this.$store.dispatch("LogOut").then(() => {
         location.href = "/login";
       });
     });
   },

登录后复制免费讲解

总结

到此这篇关于vue页面锁屏完美解决的文章就介绍到这了,更多相关vue页面锁屏内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信公众号搜索 “ 脚本之家 ” ，选择关注

程序猿的那些事、送书等活动等着你

原文链接：https://blog.csdn.net/weixin_43723051/article/details/125084309

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 reterry123@163.com 进行投诉反馈，一经查实，立即处理！

vue滑动解锁组件使用方法详解
这篇文章主要为大家详细介绍了vue滑动解锁组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Vue + iView实现Excel上传功能的完整代码
前一段时间项目经历了前端上传文件的过程，首先进入页面会展示默认的样子，选中要上传的excel文件，本文通过实例图文相结合给大家介绍的非常详细，需要的朋友参考下吧
2021-06-06
Vue3中如何检测数组的变化方式
这篇文章主要介绍了Vue3中如何检测数组的变化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
Vue数据监听方法watch的使用
这篇文章主要介绍了Vue数据监听方法watch的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
关于Vue背景图打包之后访问路径错误问题的解决
本篇文章主要介绍了关于Vue背景图打包之后访问路径错误问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
vue小白入门教程
vue是一套用于构建用户界面的渐进式框架，本文通过实例给大家介绍了vue入门教程适用小白初学者，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2018-04-04
vue实现登录验证码
这篇文章主要为大家详细介绍了vue实现登录验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Vue 获取数组键名的方法
本篇文章主要介绍了Vue 获取数组键名的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
vue 优化CDN加速的方法示例
这篇文章主要介绍了vue 优化CDN加速的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue内置指令详解
指令是Vue模板中最常用的一项功能，它带有前缀v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。这篇文章主要介绍了vue内置指令详解,需要的朋友可以参考下
2018-04-04