vue 利用路由守卫判断是否登录

1.首先你要研究通 Router  对象,
2.当用户想直接访问首页的时候,使用路由守卫判断sessionStorage里是否有对象,没有全都干到login中
3.登录成功后,注销操作,清除sessionStorage对象,跳转login
4.我没有写后台, 通过匹配vuex中用户对象,来判断. 如果成功后把对象存到sessionStorage中,

import Vue from 'vue'
import Router from 'vue-router'
import Demo from '@/components/Demo'
import Login from '@/components/Login'


Vue.use(Router)

 const router= new Router({
  routes: [
    {
     path: '/login',
     name: 'Login',
      component: Login
    },
    {
      path: '/',
      name: 'Demo',
       component: Demo
     },
  ]
})
 router.beforeEach((to,form,next)=>{
    if(to.path=='/login'){
      sessionStorage.removeItem("user");
    }
    let user = JSON.parse(sessionStorage.getItem("user"));
    if(!user&&to.path!='/login'){
      next({path:'/login'})
    }else{
      next();
    }
 })
export default router;

2.登录页面

<template>
    <div>
         <h1>登录</h1>
         <template>
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
        <el-form-item
            prop="username"
            label="用户名"
            :rules="[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            ]"
        >
            <el-input v-model="dynamicValidateForm.username"></el-input>
        </el-form-item>
        <el-form-item
            prop="password"
            label="密码"
            :rules="[
            { required: true, message: '请输入密码', trigger: 'blur' },
            ]"
        >
            <el-input v-model="dynamicValidateForm.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('dynamicValidateForm')">登录</el-button>
            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
        </el-form-item>
        </el-form>
        </template>
    </div>
</template>
<script>
import Vue from 'vue'
import { Form, Button,Input } from 'element-ui';
import { mapState,mapGetters,mapMutations } from 'vuex'
Vue.use(Button);
export default {
    data() {
      return {
        dynamicValidateForm: {
          username:"",
          password:'',
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let flag = this.verification();
            if(flag){
                sessionStorage.setItem('user',JSON.stringify(this.dynamicValidateForm.username));
                 this.$router.push({ path: '/' })
            } 
          } else {
            return false;
          }
        });
      },
      //验证账号和密码
      verification(){
          if(this.obj.username=this.dynamicValidateForm.username&&this.obj.password==this.dynamicValidateForm.password){
              return true;
          }else{
              return false;
          }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        sessionStorage.setItem('user',JSON.stringify(this.dynamicValidateForm.username));
        this.$router.push({ path: '/login' })

      },
    },
    computed:{
         ...mapState({
             obj: state => state.obj,
      })

      }
  }
</script>
<style>

</style>

3.首页(注销)

<template>
    <div>
           <img src="./../assets/logo.png">
          <span>{{this.count}}</span>
          <el-button @click="increment">加1</el-button>
          <el-button @click="reduce">减1</el-button>
        <el-button @click="cancellation">注销</el-button>
    </div>
</template>
<script >
import Vue from 'vue'
import { mapState,mapGetters,mapMutations } from 'vuex'
import { Button, Select } from 'element-ui';
Vue.use(Button);
export default {
    name: 'Demo',
      data () {
          return {

          }
      },
      methods:{
          ...mapMutations([
                'increment','decrement'
                ]),
        change(){
            this.increment();
        },
        reduce(){
            this.decrement();
        },
        cancellation(){
            this.$router.push({ path: '/login' })
        }
      },
      computed:{
         ...mapState({
             count: state => state.count,
      })

      }
  }
</script>
  
<style>
  
</style>