Vue.js实现一个SPA登录页面的过程【推荐】

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

// 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 }]})...

// 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');  } } }})

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

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

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

// 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="'log-input' + (account==''?' log-input-empty':'')" v-model="account"><input type="password" placeholder="Password" :class="'log-input' + (password==''?' log-input-empty':'')" v-model="password">  <a href="javascript:;" rel="external nofollow" class="log-btn" @click="login">Login</a> </div> ...</div></template><script>import Loading from './Loading.vue'export default { name: 'Login', data(){  return {   isLoging: false,   account: '',   password: ''  } }, components:{ Loading }, methods:{  //登录逻辑  login(){   if(this.account!='' && this.password!=''){    this.toLogin();   }  }}</script>...

...  //登录请求  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   });...

// component/UserInfo.vue... logout(){  //删除cookie并跳到登录页  this.isLogouting = true;  //请求后端，比如logout.php  // this.$http.post('eaxmple.com/logout.php')...  //成功后删除cookie  this.delCookie('session');  //重置loding状态  this.isLogouting = false;  //跳转到登录页  this.$router.push('/login/'); }...