使用 cookie 实现自动登录功能

一、登陆页面

1.checkbox+button

<el-checkbox v-model="AccountForm.autoLogin">一周内自动登录</el-checkbox>

<el-button type="primary" style="width: 372px" @click="submitForm()">登录</el-button>

2.data

  data () {
    return {
      AccountForm: {
        userName: '',
        password: '',
        autoLogin: true
      }
    }
  } 

3.methods

  methods: {
    submitForm () {
      let that = this
      let userName = that.AccountForm.userName
      let password = that.AccountForm.password
      let autoLogin = that.AccountForm.autoLogin
 
      sessionStorage.setItem('userName', userNameData)
      sessionStorage.setItem('role', role)
      sessionStorage.setItem('userToken', token)

      // 自动登录
      if (autoLogin === true) {
        let anotherUserName = sessionStorage.getItem('userName')
        let role = sessionStorage.getItem('role')
        let userToken = sessionStorage.getItem('userToken')
        that.setCookie2(userToken, anotherUserName, role, 7)
      } else {
        console.log('清空userToken')
        // 清空Cookie
        that.setCookie2('', '', '', -1)
      } 
    },
    // 自动登录
    setCookie2 (userToken, anotherUserName, role, exdays) {
      let exDate = new Date() // 获取时间
      exDate.setTime(exDate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数
      window.document.cookie = 'userToken' + '=' + userToken + ';path=/;expires=' + exDate.toGMTString()
      window.document.cookie = 'anotherUserName' + '=' + anotherUserName + ';path=/;expires=' + exDate.toGMTString()
      window.document.cookie = 'role' + '=' + role + ';path=/;expires=' + exDate.toGMTString()
    }
  }

二、main.js文件

router.beforeEach((to, from, next) => {
  console.log('main-from：', from)
  console.log('main-to：', to)

  // 判断是否自动登录，若选择了自动登录，则cookie中保存有相关信息
  if (document.cookie.length > 0) {
    let arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
    for (let i = 0; i < arr.length; i++) {
      let arr2 = arr[i].split('=') // 再次切割
      // 判断查找相对应的值
      if (arr2[0] === 'userToken') {
        sessionStorage.setItem('userToken', arr2[1])
      } else if (arr2[0] === 'anotherUserName') {
        sessionStorage.setItem('userName', arr2[1])
      } else if (arr2[0] === 'role') {
        sessionStorage.setItem('role', arr2[1])
      }
    }
  }

  let userToken = sessionStorage.getItem('userToken')
  let role = sessionStorage.getItem('role')
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    console.log('main-token：', userToken)
    if (userToken) { // 判断本地是否存在token
      if (to.meta.roles.length !== 0) {
        for (let i = 0; i < to.meta.roles.length; i++) {
          if (role === to.meta.roles[i]) {
            next()
            break
          } else if (i === to.meta.roles.length - 1) {
            next({
              path: '/Error'
            })
          }
        }
      } else {
        next()
      }
    } else {
      next({
        path: '/Login'
      })
    }
  } else {
    next()
  }
  /* 如果本地存在token,则不允许直接跳转到登录页面 */
  if (to.fullPath === '/Login') {
    if (userToken) {
      next({
        path: from.fullPath
      })
    } else {
      next()
    }
  }
})

三、退出登录页面

1.button

<a @click="exitLoginFun">退出登录</a>

2.methods

exitLoginFun () {
  sessionStorage.removeItem('userName')
  sessionStorage.removeItem('role')
  sessionStorage.removeItem('userToken')

  let arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
  for (let i = 0; i < arr.length; i++) {
    let arr2 = arr[i].split('=') // 再次切割
    // 判断查找相对应的值
    if (arr2[0] === 'userToken') {
      clearCookie('userToken')
    } else if (arr2[0] === 'anotherUserName') {
      clearCookie('anotherUserName')
    } else if (arr2[0] === 'role') {
      clearCookie('role')
    }
  }  
    
  this.$router.push({
     name: 'Login'
  })
},

clearCookie (e) {
  let exDate = new Date() // 获取时间
  exDate.setTime(exDate.getTime() + 24 * 60 * 60 * 1000 * -1) // 保存的天数
  window.document.cookie = e + '=' + '' + ';path=/;expires=' + exDate.toGMTString()
}

3.style

<style scoped>
  a:-webkit-any-link {
    cursor: pointer;
    text-decoration: none;
  }
  a:hover {
    cursor: pointer;
    color: #76c7f4;
  }
</style>

END