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;
}