1. 11 | 登錄前端實現
前端任務點，編寫登錄請求函數，和 用戶注冊 類似，前端拿到用戶名和密碼發起 POST 請求。
收到 token 如何持久化存儲，如何讓每次請求都攜帶 token 是這里的點。
用戶登錄的介面詳情可以點 這里 。
這里有可以優化的點，未來可能需要添加驗證碼等附加信息，這個時候就需要添加函數參數，就會比較麻煩，可以將參數數據格式包裝成一個對象。當然，這里還是使用第一種方法了。
這不是重點，重點是登錄成功後，我們要做的事情。
按照介面約定，登錄成功我們可以得到如下信息：
這里我們要用到 token 欄位，是我們現在有 token 了，但一刷新就沒了，所以我們要做一下持久化存儲，你想存哪裡就存哪裡，只要你能找到。這里就存儲 localStorage 中了，在 Chorme86 中你甚至可以存到一個本地的文本文件中，只不過讀取速度比較慢罷了。
除了 token，我們還要將用戶信息存下來，比如首頁展示用的用戶頭像等信息。
關於本地信息的安全性問題，本地保存的用戶信息並不作為數據請求的憑證，僅供展示使用，當用戶更改本地的用戶信息對於登錄的狀態不會有影響，因為後端的判斷依據是 token，token 有效就登錄成功，而不是說本地存儲的用戶信息是誰服務端就認為你是誰，前端是不可信的。這種登錄方式的危險點在於用戶 token 被盜，但這很難避免，最不安全的是人。。。
登錄成功，返回首頁，用戶名或者是用戶頭像並沒有同步更新，這是因為，這里是單頁應用，你在 login 頁面將登錄用戶信息存到 localStorage 中，然後跳轉到了首頁，此時頁面沒有刷新，而 localStorage 中的信息沒有及時更新到 DOM 中，此時的用戶信息還是你沒有進入 login 頁面的用戶信息，自然是無法展示的，怎麼解決呢？很簡單，刷新一下。
當頁面刷新時，用戶信息會從 localStorage 中讀取，顯示的就是現在的登錄用戶了，但。。。
我不想刷新。
也很簡單，搞成響應式數據就好了呀。來人呀，上Vuex。
當你將 token 存在 cookie 中，前端並不需要主動設置，默認就攜帶傳給了服務端，而這里我們存到 Authorization 中，就需要我們設置一下，攔截請求，在請求發送前添加 token。
好的，來捋一捋流程。
用戶訪問 /login，被前端路由處理，指向Login.vue，用戶看到登錄框，填入自己的賬號，當用戶填寫賬號時，name password被實時監聽，同時會對登錄按鈕的可操作產生影響，只有當用戶將賬密輸入完整時，登錄按鈕可用。
前端收集用戶信息，調用 network 中封裝的 longin 請求函數，該請求發送前被攔截，添加 token，可能為空，使用賬密登錄時，token沒實際效用。
後端檢查成功給響應，前端將響應中數據的 token 通過觸發 mutations 更新 Vuex 中 state，同時，將該 token 存到 localStorage，以免用戶關掉頁面導致 token 丟失。
登錄成功跳到應用首頁，用戶頭像等信息通過 Vuex 獲取，因為 Vuex 中的數據是響應式的，此時從 login 跳轉到首頁，用戶頭像等信息也會得到相應的更新。
當用戶新增文章時，只需向伺服器傳文章數據就可以了，而對於文章作者的相關信息則由後端從請求頭中的 token 解析得到，這里需要注意，前端不要將本地的用戶信息作為准確的作者信息，對於用戶可以偽造的信息要做最小化的信任，用戶完全有能力將本地用戶名從張三改為李四，而最終作者是那個則需要由用戶提供的 token 來判定，雖說 token 也有可能被偽造，但難度相對較大，往往是被竊取的可能性更大。
無密碼登錄其實還是需要「密碼」的，只不過是換了一個臨時性的對人不可讀的字元串來代替罷了，並且每次請求幫你填好了。
在不考慮安全性的情況下本質上其實就是你將密碼存到了瀏覽器里，然後你每次訪問網站時讓瀏覽器幫你輸入用戶名和密碼，這個過程你是無感知的，這樣自己就不用像個憨憨一樣每次刷新就要填一遍表單。
填表是一件非常無聊的事。
要學一波 TypeScript 了呀。
2. 前端JS 怎麼實現用戶登陸之後點各個頁面都不用再登陸
給你說個思路吧！
登錄成功之後，把登錄信息加密後保存在cookie裡面；
然後建一個js文件，在這個文件裡面做用戶是否已登錄的判斷！如果登錄了就直接顯示該頁面，如果沒登錄，就跳轉回登錄頁面！
這個js文件在登錄後才能看到的頁面都做引用；
3. 前端怎麼設置瀏覽器取消密碼記錄
設置瀏覽器取消密碼記錄方法詳見：http://jingyan..com/article/00a07f38a25f5982d028dcc2.html
4. web前端怎麼寫登錄頁面，求個demo包括後端驗證。謝謝
我寫了個Demo 你可以看看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
<p>姓名：<input type="text" id="tel"></p>
<p>密碼：<input type="password" id="pwd"></p>
<p class="pl40"><input type="submit" id="login" ></p>
</body>
<script>
$("#login").click(
function (){
var tel=$("#tel").val();//獲取頁面中登錄名和密碼
var pwd=$("#pwd").val();
if(tel==""|| pwd==""){//判斷兩個均不為空（其他判斷規則在其輸入時已經判斷）
alert("手機號密碼均不能為空！")
return false;
}else{//以上均符合要求，則調用登錄esb介面
$.ajax({
url:'login.json',//相對應的esb介面地址
type:'post',
data:{"mobile":tel,"password":pwd},//向伺服器（介面）傳遞的參數
success:function(data){//伺服器（介面）返回來的數據
if(data.mobile==tel&&data.password==pwd){//如果返回來的信息說明提交的信息為正確的
window.location.href='logon.html';//正確登錄後頁面跳轉至
}
else{//如果返回來的信息說明提供的信息為錯誤的
if(tel != data.tel){//判斷是用戶名還是密碼錯誤，提示相應信息
alert(data.message);
$("#tel").val("");
$("#pwd").val("");
return false;
}
if(pwd != data.pwd){
alert(data.message);
$("#pwd").val("");
return false;
}
}
}
})
}
}
);
/*直接點擊enter免除手動點擊登錄按鈕*/
$(document).keyup(function(event){
if(event.keyCode ==13){
$("#login").trigger("click");
}
});
</script>
</html>
json文件內容
{
"mobile":"admin",
"password":"123",
"message":"用戶名或密碼錯誤"
}
5. 前端登錄頁面輸完用戶名和密碼進入不了登錄頁面
查看電腦上是否安裝了攔截軟體,將攔截軟體退出;
2. 打開殺毒軟體清理電腦;
3. 重置瀏覽器;
6. web前端登錄界面的問題
那就判斷嗎
只要沒有跳轉語句就是還在原頁面上。
if（密碼，賬號正確）
{
跳轉語句；
}
else
{
文本框.text=null;
}