【Vue】Cookie實現登入記住密碼功能
登入頁效果圖:
主要思路是利用瀏覽器Cookie來儲存使用者登入資訊。除了儲存使用者名稱和密碼外,還儲存了一個記住密碼的標誌位,如果勾選了,則為true,反之為false。當用戶登入時,不論使用者有沒有勾選“記住密碼”,都會先將資訊存入Cookie,區別在於,如果沒勾選,則會在使用者退出登入時,清除Cookie。當然儲存資訊的方法還有很多種,Cookie一般適用於儲存資料量很小的資料。
登入頁程式碼如下:
<style scoped> .m-container { background: url("../assets/bg.jpg"); background-size: cover; height: 100%; min-height: 1000px; text-align: center; min-width: 420px; } .h200{ height: 200px } .global{ color: white;width: 500px;margin: auto;height: 300px;border: 1px solid gray; } .wel{ font-size: 18px;font-weight:bold;margin: auto;width: 100px;padding: 20px 10px; } .mt10{ margin-top: 10px } </style> <template> <div class="m-container"> <div class="h200"></div> <div class="global"> <div class="wel">歡迎登陸</div> <el-form class="mt10"> <el-form-item> <el-input :maxlength="128" placeholder="使用者名稱" style="width: 60%;" v-model="username"></el-input> </el-form-item> <el-form-item> <el-input :maxlength="128" placeholder="密碼" type="password" style="width: 60%" v-model="password"></el-input> </el-form-item> <el-checkbox v-model="checked">記住密碼</el-checkbox> <br> <br> <el-button size="large" type="primary" @click="login" style="width: 60%;">登陸</el-button> </el-form> </div> </div> </template> <script> import axios from 'axios' export default { data() { return { username: "", password: "", checked: true } }, mounted() { this.getCookie(); }, methods: { login() { var vm = this var params = new URLSearchParams(); params.append('username', this.username); params.append('password', this.password); axios.post("/api/v1/login/loginUser", params) .then(function(response) { if (response.data.ret == -1) { console.log("ret: " + response.data.ret); alert("使用者名稱或密碼錯誤!") } else { var remeberFlag; //判斷複選框是否被勾選 if (vm.checked == true) { // console.log("checked == true"); remeberFlag = "true"; }else { remeberFlag = "false"; } //呼叫配置cookie方法,傳入賬號名,密碼,和儲存天數3個引數 vm.setCookie(vm.username, vm.password, 7, remeberFlag); vm.$router.push({path:'/index'}); console.log("username: " + response.data.data.user.username); } }) .catch(function(error) { console.log("Error: " + error); }); }, //設定cookie setCookie(c_name, c_pwd, exdays, remeberFlag) { var exdate = new Date(); //獲取時間 exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //儲存的天數 //字串拼接cookie window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString(); window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString(); window.document.cookie = "remeberFlag" + "=" + remeberFlag + ";path=/;expires=" + exdate.toGMTString(); }, //讀取cookie getCookie: function() { if (document.cookie.length > 0) { var arr = document.cookie.split('; '); //這裡顯示的格式需要切割一下自己可輸出看下 for (var i = 0; i < arr.length; i++) { var arr2 = arr[i].split('='); //再次切割 //判斷查詢相對應的值 if (arr2[0] == 'userName') { this.username = arr2[1]; //儲存到儲存資料的地方 } else if (arr2[0] == 'userPwd') { this.password = arr2[1]; } } } } } } </script>
登入成功後,檢視瀏覽器Cookie
在跳轉到主頁後,一般會在導航欄展示登入使用者名稱,以及會有登出按鈕
Header.vue程式碼如下:
<style> .el-header { } </style> <template> <div> <el-header> <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#fff"> <div style="float:left; padding:15px; color:#fff; font-size:20px; cursor:pointer"><span @click="link">版本釋出平臺</span></div> <el-submenu style="float:right" index="2" > <template slot="title">當前使用者:<span id="usernameSpan"></span></template> <el-menu-item index="logOUt">退出</el-menu-item> </el-submenu> </el-menu> </el-header> <!-- </el-container> --> </div> </template> <script> export default { data() { return{ remeberFlag: true, } }, mounted() { this.getCookie(); }, methods: { link() { this.$router.push('/index'); }, // 退出登入 handleSelect(key, keyPath) { console.log(key, keyPath); if(key == "logOUt"){ var vm = this this.$http.post("/api/v1/login/logOut") .then(function(response) { if(vm.remeberFlag == "false"){ console.log("清空Cookie") vm.clearCookie(); } vm.$router.push('/'); }).catch(function(error) { console.log("outLogin error"); }); } }, //讀取cookie getCookie: function() { if (document.cookie.length > 0) { var arr = document.cookie.split('; '); //這裡顯示的格式需要切割一下自己可輸出看下 for (var i = 0; i < arr.length; i++) { var arr2 = arr[i].split('='); //再次切割 //判斷查詢相對應的值 if (arr2[0] == 'userName') { var usernameSpan = document.getElementById('usernameSpan'); usernameSpan.innerText = arr2[1]; //儲存到儲存資料的地方 } else if (arr2[0] == 'remeberFlag') { this.remeberFlag = arr2[1]; } } } }, //設定cookie setCookie(c_name, c_pwd, exdays, remeberFlag) { var exdate = new Date(); //獲取時間 exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //儲存的天數 //字串拼接cookie window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString(); window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString(); window.document.cookie = "remeberFlag" + "=" + remeberFlag + ";path=/;expires=" + exdate.toGMTString(); }, //清除cookie clearCookie: function() { this.setCookie("", "", -1, ""); //修改2值都為空,天數為負1天就好了 } } } </script>
若使用者登入時未勾選“記住密碼”,則點選退出後,再次檢視瀏覽器Cookie,發現已經清空了
相關推薦
【Vue】Cookie實現登入記住密碼功能
登入頁效果圖: 主要思路是利用瀏覽器Cookie來儲存使用者登入資訊。除了儲存使用者名稱和密碼外,還儲存了一個記住密碼的標誌位,如果勾選了,則為true,反之為false。當用戶登入時,不論使用者有沒有勾選“記住密碼”,都會先將資訊存入Cookie,區別在於,如果沒勾選
【vue】element實現table的增加行和批量刪除行功能
<template> <div id="app"> <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width:
【vue】element實現el-table-column設定寬度百分比(%)以及插入自定義內容
<el-table :data="tableData" style="width: 100%" stripe= "true"&g
MVP實現登入記住密碼
佈局,主要有輸入賬號和密碼的輸入框以及記住密碼的複選框,和點選登入的按鈕即可 <?xml version="1.0" encoding="utf-8"?> 接下來用MVP實現主要功能了 view層 public interface Log
【Django】Python 實現登入驗證碼
1 安裝 pillow 包,用於生成驗證碼圖片 程式碼檔案 verification.py #!/usr/bin/python # -*- coding: utf-8 -*- import random from PIL import Image, ImageDraw, Image
使用者登入記住密碼功能(記住登陸狀態),下次不需要重新登入,注意安全問題!實現原理
做網站的時候經常會碰到要實現記住密碼,下次自動登入,一週內免登陸,一個月內免登陸這種需求。這種功能一般都是通過cookie來實現的。 本篇文章將簡單說一下如何使用php實現該需求的。當然實現該需求的方
web實現登入,記住密碼功能(cookie)
介面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登入頁面</title>
【vue+axios】前端實現登入攔截
登入及攔截、登出、token失效的攔截及對應 axios 攔截器的使用(點選檢視原文) 登入攔截邏輯 第一步:路由攔截 首先在定義路由的時候就需要多新增一個自定義欄位requireAuth,用於判斷該路由的訪問是否需要登入。如果使用者已經登入,則順
【轉載】linux 禁止帳號密碼驗證 使用key驗證方式登入SSH
1.如果沒有裝ssh yum -y install ssh 2.建立key(此次生成給window客戶端使用) ssh-keygen -t rsa 生成檔案2個,id_rsa(私鑰),id_rsa.pub(公鑰) 下載,儲存 3.再次生成key(當前機器key) ssh-keygen -t rsa Ent
【解決】php實現頁面登入註冊功能並實現跳轉
目錄如下: 思路是不通過資料庫等操作實現頁面(頁面比較簡陋,請笑納) 關於register功能 html頁面必要的表單功能 在頭部寫上 寫上條件判斷 if ($_SERVER['REQUEST_METHOD'] === 'POST') { login();
【Vue】父元件使用v-model,實現子父元件動態傳值。
前言:父元件與子元件直接的傳值會有些小問題,特別是動態傳值。 一、實現動態傳值 <body> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <
【vue】移動端通過cube-ui實現圖片上傳
「Pre」cube-ui的安裝 POST:https://blog.csdn.net/dangbai01_/article/details/84935882 一、普通上傳 <cube-upload &nb
實現登入時的 記住密碼功能
其實核心思想就是把使用者名稱和密碼存到cookie中,在下次重新進頁面時候在從cookie讀取 首先要引入2個js <script type="text/javascript" src="js/jquery.min.js"></script> <
【VUE】vue+Verify實現防刷驗證碼驗證
>因為公司要做防刷,所以要驗證碼功能,於是又在網上找,看了一圈都是需要收費的,最後同事找了一個純前端的開源,免費的驗證碼外掛[Verify](https://veui.net/document/index),Verify的github地址: https://github
html登入 ——記住密碼 cookie
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登入頁面</title>
【react】react實現類似vue的雙向資料繫結
import React from 'react' import ReactDOM from 'react-dom' class Comment extends React.Component { constructor() { sup
【Vue】vuex狀態管理的使用,以登入狀態保持為例
一、Vuex概念 Vue.js通過Vuex對元件的公共狀態進行集中管理。每一個 Vuex 應用的核心是 store(倉庫),“store”可以理解為是一個容器,包含著應用中大部分的狀態 (state)。這些狀態是全域性的,但Vuex 和單
【vue】vue中實現標籤頁
前言 tab標籤頁實現很多, 純css實現, js實現等, 外加一些特殊動畫。 vue中實現標籤頁實現 keep-alive標籤和is特性 vue-router中巢狀路由 is特性實現(推薦) 優點:不要依賴第三方 適用:較為簡單的頁籤導航, 如果需要儲存其他頁籤狀態, 外部使用&l
android用SharedPreferences實現登入時記住密碼功能
import android.content.Intent;import android.content.SharedPreferences;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import andr
【Vue】使用clipboard實現複製文字到剪貼簿
需求如下:假設有這樣的列表,我們希望能夠點選複製通知連結按鈕,將表格中通知連結列的內容複製到剪貼簿,畢竟通知連結的內容比較多,能夠複製的話,該列就可以不用展示出來。 1、安裝clipboard npm install clipboard --save 檢視是否安裝成