Vue项目登录退出功能

Vue实现登录退出功能

• 登录实现
  1. 用户输入用户名跟密码
  2. 数据提交到后台验证
  3. 验证成功跳转到项目首页
• 功能实现
  1. 判断用户是否登录
  2. 需要用到登录的强制跳转到登录页(比如购物车收藏 , 关注等等)
  3. 使用 localStorage 存 token

// 路由全局守卫写判断
router.beforeEach(async (to, from, next) => {
// 存一个token 字符串类型(String)
  const token = localStorage.getItem('token')
  // console.log(typeof token)
  // !!把值转为布尔类型(Boolean)
  const isLogin = !!token
  //vuex方法
  const data = await userInfo()
  Store.commit('chnageUserInfo', data.data)
  // 路由元信息判断login值是否为true 
  if (to.matched.some(item => item.meta.login)) {
  // 当登录成功
    if (isLogin) {
    	// 名字非法跳登录页面 ,清空token
      if (data.error === 400) {
        next({ name: 'login' })
        localStorage.removeItem('token')
        return;
      }
      //到登录页还去登录页跳到首页去别的页面就正常去
      if (to.name === 'login') {
        next({ name: 'home' })
      } else {
        next()
      }
      return;
    }
    // 不在登录页要去登录页,让他去
    if (!isLogin && to.name === 'login') {
      next()
    }
    // 不在登录页也不去登录页 ,强行跳登录页
    if (!isLogin && to.name !== 'login') {
      next({ name: 'login' })
    }
  } else {
    next()
  }
})

登录组件代码

<template>
  <div class="login-section">
    <!-- :rules="rules" -->
    <el-form
      label-position="top"
      label-width="100px" class="demo-ruleForm"
      :model="ruleForm" 
      :rules="rules" 
      ref="ruleForm"
      status-icon
    >
      <el-form-item label="用户名" prop="name">
        <el-input type="text" v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {login} from '@/service/api';

export default {
  data() {
    return {
      ruleForm: {
        name: '',
        password: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
         if(valid){  
            login({
              name:this.ruleForm.name,
              password:this.ruleForm.password
            }).then((data)=>{
              // console.log(data)
              if(data.code===0){
                localStorage.setItem('token',data.data.token)
                window.location.href='/' 
              }
              if(data.code===1){
                this.$message.error(data.mes)
              }
            })
          }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style lang="stylus">
.login-section
  padding 0px 20px
</style>

vuex代码

const store = new Vuex.Store({
  state:{
    userInfo: {}
  },
  getters:{
    isLogin(state){
      return !!Object.keys(state.userInfo).length;
    }
  },
  mutations:{
    chnageUserInfo(state, data){
      state.userInfo = data;
    }
  },
  actions:{}
})

点登陆就有token值

• 退出功能实现思路
  1. 把token值删除
  2. 跳转到首页

 <template>
   <el-button type="text" @click="open">
      <a href="javascript:;" class="collection">退出</a>
    </el-button>
</template>
<script>
// 映射vuex方法
import {mapState,mapGetters} from "vuex"
export default {
  name: 'headers',
  components: {Menus},
  computed:{
    ...mapState(['userInfo']),
    ...mapGetters(['isLogin'])
  },
  methods:{
    open() {
      this.$confirm('确定退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
     	// 删除token  window一定要加不加没效果
        window.localStorage.removeItem('token')
        // 跳转到首页
        window.location.href="/"
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
    }
  }
}
</script>
<style lang="stylus">
.header 
  height 129px
  background-color #c90000
   
  .logo 
    display: block;
    height: 129px;
    width: 184px;
    background url(https://s1.c.meishij.net/n/images/logo2.png) -15px 9px no-repeat;

.header_c, .nav_c
  width 990px
  margin 0 auto 
.nav-box 
  height 60px
  background-color #fff;
  box-shadow 10px 0px 10px rgba(0,0,0,0.3)


.user-name
  margin-left 5px
  color #fff

.collection 
  margin-left 5px  
  color #fff

</style>