Vue.js는 SPA 로그인 페이지의 예를 작성합니다.

기술 스택

• vue.js 메인 프레임워크

• vuex 상태 관리

• vue-router 라우팅 관리

일반 프로세스

일반 로그인 프로세스에서 프런트엔드 솔루션은 다음과 같습니다.

1. 상태 확인: 페이지 진입 시 또는 경로 변경 시(쿠키 또는 로컬 저장소에 저장된 값) cookie或者本地存储的值)；

2. 如果有登录态则查询登录信息(uid，头像等...)并保存起来；如果没有则跳转到登录页；

3. 在登录页面（或者登录框），校检用户输入信息是否合法；

4. 校检通过后发送登录请求；校检不成功则反馈给用户；

5. 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功则提示用户不成功；

6. 用户做出注销操作时删除登录状态。

下面我根据列出的步骤一一分析如何做代码实现，所有在代码在中，并带有较详细注释帮助理解代码。

在此之前假设登录页面路由为/login，登录后的路由为/user_info。这样只需要在App.vue放好router-view用于存放和渲染这两个路由。

// component/App.vue
<template><div class="container" id="app">  <transition name="fade"><keep-alive>      <router-view></router-view></keep-alive>  </transition></div></template>
...

并做好vue-router配置:

// js/app.jsimport Vue from 'vue'import VueRouter from 'vue-router'import Login from '../component/Login.vue'import UserInfo from '../component/UserInfo.vue'

Vue.use(VueRouter);const router = new VueRouter({  routes: [{path: '/login',component: Login
  }, {path: '/user_info',component: UserInfo
  }]
})
...

检查状态与跳转

在两个时候我们需要检查状态：1.用户打开页面时； 2.路由发生变化时；

首先需要写好一个检查登录态的方法checkLogin：

// js/app.js
...
var app = new Vue({  data: {},  el: '#app',  render: h => h(App),
  router,
  store,  methods:{
    checkLogin(){      //检查是否存在session      //cookie操作方法在源码里有或者参考网上的即可      if(!this.getCookie('session')){//如果没有登录状态则跳转到登录页this.$router.push('/login');
      }else{//否则跳转到登录后的页面this.$router.push('/user_info');
      }
    }
  }
})

为了提升用户体验，当用户打开页面时前端需要检查他是否已经登录，不需要用户再次登录。这个实现很简单,我们在vue实例的created钩子里写好：

// js/app.js
...
var app = new Vue({
  ...
  created() {this.checkLogin();
  },  methods:{
    checkLogin(){
     ...
    }
  }
})

另外，路由发生变化时也需要检查登录，以下情景(路由变化)如果我们不检查登录态可能会发生错误：

• 用户在进入页面时存在登录状态，但在做操作时正好登录过期了；

• 用户手动删除了cookie/本地storage并做操作；

• 用户在未登录的情况下手动输入(或者从收藏夹进入)某个需要登录的路由

• 用户在已登录的情况下进入登录页路由

这些足够成为我们监听路由的理由，实现的话可以利用vue的watch功能：

// js/app.js
...
var app = new Vue({
  ...  //监听路由检查登录
  watch:{"$route" : 'checkLogin'
  },  //进入页面时
  created() {this.checkLogin();
  },  methods:{
    checkLogin(){
     ...
    }
  }
})

至此，我们就完成了一般过程中的第1步。接下来实现如何获取用户个人信息。

获取用户信息

在成功登录后，我们一般需要从后端显示用户的一些信息，比如昵称，头像，等级等等...获取的话很简单，发一个http请求从后端拉取；但是一般这些信息会在多的路由用到（比如uid一般都需要在各个后端接口中作为参数带上），所以需要保存到全局状态中(vuex)：

// component/App.vue
...
<script>export default {
  ...
  mounted(){//组件开始挂载时获取用户信息this.getUserInfo();
  },  methods: {//请求用户的一些信息
    getUserInfo(){      this.userInfo = {nick: &#39;Doterlin&#39;,ulevel: 20,uid: &#39;10000&#39;,portrait: &#39;images/profile.png&#39;
      }      //获取信息请求
      ts.$http.get(url, {//参数"params": this.userInfo
      }).then((response) => {//Successif(response.data.code == 0){          this.$store.commit(&#39;updateUserInfo&#39;, this.userInfo); 
        }
      }, (response) => {//Error
      });

    }
  }
}
</script>
...

当然我们需要在之前配置好，比如在写在app.js或者单独写成store.js并在app.js引入（推荐）：

// js/app.js// Vuex配置
...
const store = new Vuex.Store({  state: {domain:'http://test.example.com', //保存后台请求的地址，修改时方便（比方说从测试服改成正式服域名）
    userInfo: { //保存用户信息
      nick: null,      ulevel: null,      uid: null,      portrait: null
    }
  },  mutations: {//更新用户信息
    updateUserInfo(state, newUserInfo) {
      state.userInfo = newUserInfo;
    }
  }
})
...

输入校验和发送登录请求

为了防止一些不符合预期的字符和过于频繁的请求传到后台，前端要对用户的输入进行校验和防止重复请求。当然不同网站的合法字符不一样，这里只做为空时不合法的校验：

//component/Login.vue
<template><div class="login" id="login">
   ...<div class="log-email"><input type="text" placeholder="Email" :class="&#39;log-input&#39; + (account==&#39;&#39;?&#39; log-input-empty&#39;:&#39;&#39;)" v-model="account"><input type="password" placeholder="Password" :class="&#39;log-input&#39; + (password==&#39;&#39;?&#39; log-input-empty&#39;:&#39;&#39;)"  v-model="password"><a href="javascript:;" class="log-btn" @click="login">Login</a></div>
    ...</div></template><script>import Loading from &#39;./Loading.vue&#39;export default {  name: &#39;Login&#39;,
  data(){      return {          isLoging: false,          account: &#39;&#39;,          password: &#39;&#39;
      }
  },  components:{
    Loading
  },  methods:{      //登录逻辑
      login(){          if(this.account!=&#39;&#39; && this.password!=&#39;&#39;){              this.toLogin();
          }
      }

}</script>
...

这里的this.toLogin就是登录请求的方法，在post密码到后端时不是直接发送，一般会按照后端定的规则加密后在发送，比如哈希算法，例子进行了的双重哈希加密，引用了js/sha1.min.js

) 로그인 상태가 있는지 확인하세요. 로그인 상태가 있으면 로그인 정보(uid, 아바타 등...)를 쿼리하고 저장합니다. 그렇지 않으면 로그인 페이지로 이동합니다.

로그인 페이지(또는 로그인 상자)에서 사용자 입력 정보는 합법적입니다.

인증에 실패하면 사용자에게 피드백이 전달됩니다. 🎜🎜🎜🎜로그인에 성공하면 세션< /code> 정보는 로그인 상태를 저장하기 위해 백엔드 데이터에서 가져옵니다(점프가 필요할 수 있음). 로그인에 실패하면 사용자에게 로그인 상태가 실패했다는 메시지가 표시됩니다. 사용자가 로그아웃 작업을 수행할 때. 🎜🎜</ol>🎜 아래에서는 나열된 단계에 따라 코드를 하나씩 구현하는 방법을 코드에 모두 분석하고 코드 이해를 돕기 위해 더 자세한 설명을 추가하겠습니다. 🎜🎜이전에는 로그인 페이지 경로가 <code>/login, 로그인 후 경로가 /user_info라고 가정했습니다. 이런 방식으로 App.vue에 router-view를 배치하기만 하면 이 두 경로를 저장하고 렌더링할 수 있습니다. 🎜

...      //登录请求
      toLogin(){          //一般要跟后端了解密码的加密规则          //这里例子用的哈希算法来自./js/sha1.min.js          let password_sha = hex_sha1(hex_sha1( this.password ));          //需要想后端发送的登录参数          let loginParam = {              account: this.account,
              password_sha
          }          //设置在登录状态          this.isLoging = true;          //请求后端          this.$http.post( 'example.com/login.php', {          param: loginParam).then((response) => {if(response.data.code == 1){              //如果登录成功则保存登录状态并设置有效期              let expireDays = 1000 * 60 * 60 * 24 * 15;              this.setCookie('session', response.data.session, expireDays);              //跳转              this.$router.push('/user_info'); 
            }
          }, (response) => {//Error
          });

...

🎜그리고 vue-router 구성을 만드세요: 🎜

<code class="javascript"><span class="hljs-comment">// component/UserInfo.vue
...
   logout(){      <span class="hljs-comment">//删除cookie并跳到登录页      <span class="hljs-keyword">this.isLogouting = <span class="hljs-literal">true;      <span class="hljs-comment">//请求后端，比如logout.php      <span class="hljs-comment">// this.$http.post(&#39;eaxmple.com/logout.php&#39;)...      <span class="hljs-comment">//成功后删除cookie      <span class="hljs-keyword">this.delCookie(<span class="hljs-string">&#39;session&#39;);      <span class="hljs-comment">//重置loding状态      <span class="hljs-keyword">this.isLogouting = <span class="hljs-literal">false;      <span class="hljs-comment">//跳转到登录页      <span class="hljs-keyword">this.$router.push(<span class="hljs-string">&#39;/login/&#39;);
    }
..</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code><br/>

🎜상태를 확인하고 점프하세요🎜🎜두 번에 걸쳐 상태를 확인해야 합니다: 1. 사용자가 페이지를 열 때; > 2. 라우팅이 변경되는 경우;🎜🎜먼저 로그인 상태를 확인하는 메소드 checkLogin를 작성해야 합니다. 🎜rrreee🎜사용자 경험을 개선하려면, 사용자가 페이지를 열면 프런트 엔드에서 이미 로그인되어 있는지 확인해야 하며, 사용자는 다시 로그인할 필요가 없습니다. 이 구현은 매우 간단합니다. vue 인스턴스의 created 후크에 작성했습니다. 🎜rrreee🎜또한 라우팅시 로그인을 확인해야 합니다. code> 변경, 다음 시나리오(라우팅 변경)에서는 로그인 상태를 확인하지 않으면 오류가 발생할 수 있습니다. 🎜🎜🎜🎜사용자가 페이지에 들어갈 때 로그인되어 있지만 작업을 수행할 때 로그인이 만료되었습니다. 🎜🎜사용자가 쿠키/로컬 저장소를 수동으로 삭제하고 작업을 수행합니다. 🎜🎜🎜🎜사용자가 로그인하지 않고 로그인이 필요한 경로를 수동으로 입력(또는 즐겨찾기에서 입력)합니다. 🎜🎜🎜 🎜사용자는 로그인 시 로그인 페이지 경로를 입력합니다🎜🎜🎜🎜이것만으로도 경로를 모니터링할 수 있는 이유는 충분합니다. 이를 구현하려면 의 <code>watch 기능을 사용하면 됩니다. vue: 🎜rrreee 🎜이제 일반 프로세스의 1단계가 완료되었습니다. 다음으로 사용자 개인정보를 얻는 방법을 구현합니다. 🎜🎜사용자 정보 가져오기🎜🎜로그인 성공 후 일반적으로 백엔드에서 닉네임, 아바타, 레벨 등과 같은 일부 사용자 정보를 표시해야 합니다. 정보를 얻는 방법은 매우 간단합니다. backend; 그러나 일반적으로 이 정보는 많은 경로에서 사용되므로(예를 들어 uid는 일반적으로 각 백엔드 인터페이스에서 매개변수로 전달되어야 함) 전역 상태(vuex)에 저장되어야 합니다. ): 🎜rrreee🎜 물론 app.js에 작성하거나 별도로 store.js로 작성하여 app.js (권장): 🎜rrreee🎜로그인 요청을 보내려면 체크섬을 입력하세요🎜🎜예상치 못한 문자와 너무 빈번한 요청이 백그라운드로 전송되는 것을 방지하려면 프런트 엔드에서 사용자의 입력하고 반복적인 요청을 방지합니다. 물론 웹사이트마다 유효한 문자가 다릅니다. 여기서는 가 비어 있는 경우에만 불법 문자를 확인합니다. 🎜rrreee🎜여기서 this.toLogin은 로그인 요청 방법입니다. . post비밀번호는 백엔드로 직접 전송되지 않습니다. 일반적으로 해시 알고리즘과 같이 전송되기 전에 백엔드에서 설정한 규칙에 따라 암호화됩니다. 이중 해시 암호화를 사용하여 js/sha1.min.js를 인용하면 대략적인 구현은 다음과 같습니다. 🎜rrreee🎜이렇게 하면 3, 4, 5단계가 완료됩니다. 마지막 단계는 로그아웃입니다. 🎜🎜Logout🎜🎜로그아웃할 때 백엔드를 요청해야 하는 경우도 있고 그렇지 않은 경우도 있습니다. 중요한 것은 저장된 로그인 상태를 삭제하는 것입니다: 🎜rrreee🎜🎜

위 내용은 Vue.js는 SPA 로그인 페이지의 예를 작성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!