登入登出功能的实现

一、localStorage的使用

function populateStorage() {
   localStorage.setItem('bgcolor', 'red'); // 设置localStorage的bgcolor属性
   localStorage.setItem('font', 'Helvetica');
   localStorage.setItem('image', 'myCat.png');
   localStorage.clear() // 清除localStorage的所有属性，清除后  localStorage.length=0
}
populateStorage();
console.log(localStorage.length); // 获取localStorage的长度
console.log(localStorage); // 打印localStorage的所有属性，包括系统默认的
console.log(localStorage.getItem('bgcolor')); // 获取localStorage的bgcolor的属性值
console.log(localStorage.getItem(localStorage.key(0))); // 获取localStorage的index=0的属性值
localStorage.removeItem('image') // 移除属性image
console.log(localStorage.getItem('image')); // 获取image属性的值

二、Login实现

// data 定义
login: {
   type: 'account',
   username: '',
   password: ''
},

// loginSuccess
loginSuccess(token, username, role) {
    localStorage.setItem('Authorization', `Bearer ${token}`);
    this.$store.commit('setUser', {
       username: username,
       role: role
    });
    // 设置header的默认属性
    window.$axios.defaults.headers.common['Authorization'] =localStorage.getItem('Authorization');
    let _url = this.$route.query.redirect ? this.$route.query.redirect : '/'
    this.$router.push(_url);
    this.$refs['loginForm'].resetFields();
},
// submit()
submit() {
   this.$refs['loginForm'].validate((valid) => {
      if (valid) {
          this.$axios.post(`${api_host}/lego/admin/login`, this.login).then((res) => {
            let r = res.data.data;
            if (r) {
              // 本地持久化只存储token; 其他信息通过token校验来获得
              this.loginSuccess(r.token, r.username, r.type);
            }
          }).catch(error => {
            this.$refs['loginForm'].resetFields();
            this.$Message.error(error.response.data.text);
          });
      }
   })
}

三、校验Authorization是否有效

// 校验token 是否过期
if (localStorage.getItem('Authorization')) {
    window.$axios.defaults.headers.common['Authorization'] = localStorage.getItem('Authorization');
    this.$axios.get(`${api_host}/lego/admin/check`).then((res)=>{
        let r = res.data.data;
        this.$store.commit('setUser', {
          username: r.username,
          role: r.type
        });
     }).catch(error => {
        this.gotoLogin();
     });
  }

四、logout注销

gotoLogin() { // 注销时跳转至登录页面
   localStorage.removeItem('Authorization');
   this.$store.commit('setUser', {
       username: null,
       role: null
   });
   this.$router.push('/login');
},
logout(name) { // 点击注销按钮触发
   if (name === 'logout') {
      this.gotoLogin();
   }
}

五、基于Token的身份验证的过程

• 用户通过用户名和密码发送请求；
• 程序验证；
• 程序返回一个签名的token给客户端；
• 客户端储存token，并且用于每次发送请求；
• 服务端验证token并返回数据；
  每次请求都需要token，token应该在HTTP头部发送从而保证了HTTP请求无状态，我们同样通过设置服务器属性Access-Control-Allow-Origin:* ，让服务器能接受到来自所有域的请求，需要注意的是：在ACAO头部标明（designating）*时，不得带有像HTTP认证，客户端SSL证书和cookies的证书；

六、基于服务器的验证
HTTP协议是无状态的，这种无状态意味着程序需要验证每一次请求，从而辨别客户端的身份，程序通过服务端存储的登录信息来辨别请求，这种方式一般都是通过存储Session来完成，随着Web,应用程序以及移动端的兴起，这种验证方式逐渐暴露出了问题，尤其是在可扩展性方面；
存在的问题：
1）Session：每次认证用户发起请求时，服务器需要去创建一个记录来存储信息，当越来越多的用户发请求时，内存的开销也会不断增加；
2）可扩展性：在服务端的内存中使用Session存储登录信息，伴随而来的是可扩展性问题；
3）CORS（跨域资源共享）：当我们需要让数据跨多台移动设备使用时，跨域资源的共享会是一个让人头疼的问题，在使用AJAX抓取另一个域的资源时，就可以会出现禁止请求的情况；
4）CSRF（跨站请求伪造）：用户在访问银行网站时，他们很容易受到跨站请求伪造的攻击，并且能够利用其访问其他的网站；