使用cookie+localStorage+vuex实现页面登陆

使用cookie+localStorage+vuex实现页面登陆

要实现一个登陆页面，具体要求有：
1.匹配用户名和密码正确，点击进入系统，否则弹出提示用户名或密码不正确。
2.登陆成功后，3天时间内可以直接进入，不需重新登陆，直接进入系统。（使用vuex和cookie保存登陆状态，使用cookie控制时间）
3.登陆过的用户，下次登陆时输入框中保存了之前的用户名，即使在3天之后，输入框中也保存用户信息。（使用localStorage进行保存）

以上为需求梳理，下面就一起来实现吧~

1.首先，在App.vue中

<template>
  <div id="app">
     <!--如果状态时已登陆，进入主页面-->
    <el-container v-if="isLogin"></el-container> 
     <!--否则进入登陆页面，在router中进行配置-->    
    <router-view v-else></router-view>
  </div>
</template>

2.router中的配置如下

 routes: [
    {
      path: "/",
      redirect: "/login",  //跳转到登陆页面
    },
    {
      path: "/memberList",
      name: "memberList",
      component: memberList  //进入主页面
    }]

3.在main.js中，需要对路由进行卡控，防止用户在浏览器中改变链接内容，从而控制页面的跳转。
例如：用户自己改变链接为http://localhost:8080/#/memberlist，想要以此进入memberlist页面，路由也会自动转换为http://localhost:8080/#/login?redirect=%2FmemberList，防止用户通过非正常手段进入。

router.beforeEach(function (to, from, next) {
  let user_state = getCookie(`checkState`) || this.app.$options.store.state.user.checkState
  if (to.path === "/login") {
    next();
  } else if (!user_state) {
  //判断如果没有登陆状态，即使用户自己改变链接http://localhost:8080/#/memberlist，想要以此进入memberlist页面，路由也会自动转换为http://localhost:8080/#/login?redirect=%2FmemberList
    next({path: '/login', replace: true, query: {redirect: to.fullPath}});
  } else {
    next();
  }
}.bind(router));

4.在vuex中存储登陆状态的方法

5.登陆页面login.vue，这里使用的时element ui框架。localStorage中存储用户名密码。cookie和vuex中存储登陆状态都在此页面

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple">
          <el-input placeholder="请输入用户名" v-model="username"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple">
          <el-input placeholder="请输入登陆密码" v-model="password"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <el-button type="primary" @click="login">登录</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import {setCookie} from '../../utils/CookieUtil' //引入封装好的setCookie方法
 export default {
    name: "login",
    data() {
      return {
        password: ``,
        username: ``
      }
    },
     methods: {
      login() {
        let params = {username: this.username, password: this.password}
        axios.post(`后台接口路径`, qs.stringify(params)) //必要时需用qs进行参数转换
          .then(data => {
            let dataObj = data.data
            //先判断是否请求成功，成功会直接返回data属性，也就是用户的信息
            if (dataObj.success) {
              if (dataObj.data && dataObj.data.state === 1) {
                //能拿到用户的信息，并且是启用的
                let expireDays = 1000 * 60 * 60 * 24 * 3; //设置cookie存储的时间为3天
                setCookie('checkState', true, expireDays); //设置登陆状态
                this.$store.dispatch('user/updateState',1) //将登陆状态存在vuex里面
                this.$router.replace('/memberList')//跳转菜单页面
              } else {
                //用户的state不为1，证明用户状态为停用或者冻结等等其他的不可登陆的状态，提示要自己判断state
                this.$message(`该用户无法正常登陆`)
              }
            } else {
              this.$message(dataObj.desc)
            }
          })
          //将用户名和密码存在localStorage中
        localStorage.setItem("username", this.username);
        localStorage.setItem("password", this.password);
      },
    },
    created() {
      for (var i = localStorage.length - 1; i >= 0; i--) {
        if (localStorage.key(i) == 'username') {
          this.username = localStorage.getItem(localStorage.key(i))
        } else if (localStorage.key(i) == 'password') {
          this.password = localStorage.getItem(localStorage.key(i))
        }
      }
    },
}
</script>

6.完成上述之后，我们返回到App.vue中完成最后一步。
登陆状态存在cookie中时，getCookie不是响应式依赖所以计算属性不会重新计算。登陆状态只存在vuex中，只有在程序运行才能存储，刷新后登陆状态会丢失，所以这里选择二者结合使用。

<script>
  import {getCookie} from './utils/CookieUtil'
  import {mapMutations} from 'vuex'
  import {mapState} from 'vuex'

  export default {
    name: 'app',
    mounted() {
      this.updateCheckState(getCookie(`checkState`)) //页面重新挂载，vuex中存储的登陆状态消失时，从cookie中获取
     },
    computed: {
      isLogin() {
        return this.$store.state.user.checkState  //实时从vuex中获取登陆状态
      },
    },
   methods: {
.   ..mapMutations(`user`, [`updateCheckState`]) //从vuex的Mutation中获取updateCheckState方法，获取后在上面的mounted中就能直接使用该方法了
   },
}
</script>