一.專案介紹：

通過使用element ui組件庫對頁面進行布局，然后再通過路由守衛驗證登錄狀態

驗證登錄：有些路由是需要登錄的，判斷狀態

1.沒有登錄：跳轉到登錄頁

2.登錄：直接進入

3.有些路由不需要登錄，那就直接進入；

ps：是否需要登錄 --meta

二.效果展示：

三.代碼展示：

login.vue:登錄頁面

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

export default {
  data() {
    return {
      //存盤資料的物件
      rulesForm: {
        name: "",
        password: "",
      },
      rules: {
        name: [
          { required: true, message: "請輸入姓名", trigger: "blur" },
          { min: 2, max: 5, message: "長度3-5個", trigger: "blur" },
        ],
        password: [
          { required: true, message: "請輸入密碼", trigger: "blur" },
          { min: 6, max: 12, message: "長度3-5個", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //如果效驗通過，在這里向后端發送用戶名和密碼
          login({
            name: this.rulesForm.name,
            password: this.rulesForm.password,
          }).then((data) => {
            console.log(data);
            if (data.code === 0) {  //判斷code為0，則登陸成功
              localStorage.setItem("token", data.data.token);
              window.location.href = "/";
            }
            if (data.code === 1) {//判斷code為1.則登錄失敗，服務器會提示錯誤資訊
              this.$message.error(data.mes);
            }
          });
        } else {
          console.log("error  submit!!");
          return false;
        }
      });
    },
  },
};
</script>

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

router:配置路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

import {userInfo}from '@/service/api.js'
import Home from '@/views/home/Home.vue'
import Store  from '@/store'

const Edit=()=>import('@/views/user-space/edit');
const Space=()=>import('@/views/user-space/space');
const Login=()=>import('@/views/user-login/index');

const router = new Router({
    mode:"history",
    routes:[
    {
        path:'/',
        name:"Home",
        title:"首頁",
        component:Home
    },
    {
        path:'/login', 
        name:"login",
        title:"登錄頁",
        component:Login,
        meta:{
            login: true
        },
    },
    {
        path:'/space', 
        name:"space",
        title:"個人空間",
        component:Space,
        meta:{
            login: true
        },
    },
    ,
    {
        path:'/edit', 
        name:"edit",
        title:"編輯個人資料",
        component:Edit,
        meta:{
            login: true
        },
    },
    {
        path:"*",
        name:"noFound",
        title:"未找到",
        redirect:{
            name:"Home"


        }
    },
]
});
//路由守衛
router.beforeEach(async (to,from,next)=>{
   驗證登錄：
    const token=localStorage.getItem('token');//獲取login里的資料
    const isLogin=!!token;//兩個感嘆號轉布林值
    //進入路由的時候，向后端發送token，驗證是否合法
     const data =await userInfo();
     Store.commit('chageUserInfo',data.data);
   //判斷是否需要登錄：如果meta中的為true那么需要登錄
    if (to.matched.some(item=>item.meta.login)) {//需要登錄
        console.log("需要登錄")


        if (isLogin) {//已經登錄但已經登陸就直接通過
            if (data.error === 400) {
                next({name:'login'});
                localStorage.removeItem('token');//移除本地存盤
                return;
            }
            if (to.name=== 'login') {
                next({name:'home'})
            }else{
                next();
            }
            next();
            return;
        }
        if(!isLogin && to.name==='login') {//沒有登陸，仍需要去登錄頁
            next();
        }
        if(!isLogin && to.name !=='login') {//沒有登陸，去的也不是登錄頁
            next({name:"login"});
        }
    } else{
        next();
    }
})


export default router;

vuex庫：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

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

export default store;

header.vue:

<template>
  <el-header style="height: auto;">
    <div class="header">
      <div class="header_c">
        <el-row type="flex" justify="start" align="middle">
          <el-col :span="6">
            <a href="" class="logo"> </a>
          </el-col>
          <el-col :span="10" :offset="2"></el-col>
          <el-col :span="6" :offset="3" class="avatar-box" v-show="isLogin">
            <router-link :to="{ name: 'space' }">
              <el-avatar
                style="vertical-align: middle;"
                shape="square"
                size="medium"
                :src="userInfo.avatar"
              ></el-avatar>
            </router-link>
            <router-link :to="{ name: 'space' }" class="user-name">{{
              userInfo.name
            }}</router-link>
            <router-link :to="{ name: 'space' }" class="collection"
              >發布菜譜</router-link
            >
            <a href="javascript:;" class="collection" @click="exit">退出</a>
          </el-col>
          <el-col :span="6" :offset="3" class="avatar-box" v-show="!isLogin">
            <router-link :to="{ name: 'login' }" class="user-name"
              >登錄</router-link
            >
            <router-link :to="{ name: 'login' }" class="collection"
              >注冊</router-link
            >
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="nav-box">
      <div class="nav_c">
        <Menus></Menus>
      </div>
    </div>
  </el-header>
</template>
<script>
import Menus from "@/components/menus";
import { login_out } from "@/service/api";
export default {
  name: "headers",
  components: { Menus },
  computed: {
    isLogin() {
      return this.$store.getters.isLogin;
    },
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
  methods: {
    exit() {
      this.$confirm("真的退出嗎？", "提示", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const data = await login_out();
        localStorage.removeItem("token");
        window.location.href = "/";
      });
    },
  },
};
</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>

看到這里就沒了，這篇文章主要寫了美食杰專案的登錄頁面，傻瓜式教程，希望對大家有幫助！！！