目錄

• 設(shè)計(jì)思路
• 代碼實(shí)現(xiàn)

設(shè)計(jì)思路

• 定義路由的時(shí)候配置屬性，這里使用needLogin標(biāo)記訪問(wèn)頁(yè)面是否需要登錄
• 設(shè)置路由守衛(wèi)，每個(gè)頁(yè)面在跳轉(zhuǎn)之前都要經(jīng)過(guò)驗(yàn)證，校驗(yàn)用戶信息是否存在，不存在跳轉(zhuǎn)到登錄頁(yè)
• 用戶登錄后將用戶信息存儲(chǔ)在localStorage
• 退出登錄后，將用戶信息清空

代碼實(shí)現(xiàn)

1、router文件夾的index.js文件中

• 在router中每個(gè)地址在meta屬性中配置needLogin熟悉，判斷訪問(wèn)頁(yè)面是否需要登錄
• 404頁(yè)面放在最后，匹配所有鏈接，實(shí)現(xiàn)輸入不存在的地址時(shí)自動(dòng)跳轉(zhuǎn)404頁(yè)面

import Vue from "vue"import Router from "vue-router"import LoginCard from "../components/LoginCard";import Home from "../components/Home";import ErrorPage from "../components/ErrorPage";Vue.use(Router)export default new Router({  routes: [    {      path: "/",      name: "LoginCard",      component: LoginCard,      meta: {needLogin: false      }    },    {      path: "/loginCard",      name: "LoginCard",      component: LoginCard,      meta: {needLogin: false      }    },    {      path: "/home",      name: "Home",      component: Home,      meta: {needLogin: true      }    }, {      path: "/*",      name: "ErrorPage",      component: ErrorPage,      meta:{needLogin: false      }    }  ]})

2、在main.js中定義一個(gè)路由前置守衛(wèi)，每次跳轉(zhuǎn)頁(yè)面進(jìn)行判斷，沒(méi)有登陸自動(dòng)挑戰(zhàn)登陸界面

import Vue from "vue"import App from "./App"import router from "./router"import VueRouter from "vue-router";import ElementUI from "element-ui"import "element-ui/lib/theme-chalk/index.css"import * as auth from "./utils/auth"import store from "./store"import Vuex from "vuex";Vue.config.productionTip = false;Vue.use(ElementUI);Vue.use(VueRouter);Vue.use(Vuex)//這個(gè)方法需要放在new Vue之前，不然按F5刷新頁(yè)面不會(huì)調(diào)用這個(gè)方法router.beforeEach(function (to, from, next) {  console.log("是否需要登錄才能訪問(wèn)")  if (to.meta.needLogin) {    if (auth.getAdminInfo()) {      console.log(auth.getAdminInfo())      console.log("有cookie信息")      next();    }else {      console.log("無(wú)cookie信息")      next({path:"/loginCard"      });    }  }else{    next();  }})new Vue({  el: "#app",  router,  store,  components: { App },  template: "<App/>"})

3、編寫一個(gè)存儲(chǔ)數(shù)據(jù)的工具，使用cookie存儲(chǔ)用戶登錄后的信息

import Cookies from "js-cookie"const adminInfo = "adminInfo"http://獲取用戶信息export function getAdminInfo() {  const admin = Cookies.get(adminInfo)  if(admin){    return JSON.parse(admin)  }  return ""}//存儲(chǔ)用戶信息export function setAdminInfo(admin) {  return Cookies.set(adminInfo, JSON.stringify(admin))}//移除用戶信息export function removeAdminInfo() {  return Cookies.remove(adminInfo)}

4、寫一個(gè)登錄頁(yè)面，用戶登錄后就將數(shù)據(jù)存儲(chǔ)在cookie中

?<template>  <div>    <el-form ref="loginForm" :rules="formRules" :model="loginUser" label-width="80px">      <h3>歡迎登錄</h3>      <el-form-item label="用戶名" prop="username"><el-input prefix-icon="el-icon-user" type="text" v-model="loginUser.username"  placeholder="請(qǐng)輸入用戶名" :maxlength="50" clearable></el-input>      </el-form-item>      <el-form-item label="密碼" prop="password"><el-input prefix-icon="el-icon-lock" type="password" v-model="loginUser.password"  placeholder="請(qǐng)輸入密碼" :maxlength="50" clearable></el-input>      </el-form-item>      <el-form-item><el-button type="primary" @click="onSubmit">登陸</el-button><el-button icon="" @click="resetForm">重置</el-button>      </el-form-item>    </el-form>  </div></template><script>import * as auth from "../utils/auth"export default {  name: "LoginCard",  data() {    return {      loginUser: {username: "",password: "",      },      formRules: {//制定表單輸入的規(guī)則username: [{required: true, message: "用戶名不能為空", trigger: "blur"}],password: [{required: true, message: "密碼不能為空", trigger: "blur"}]      }    }  },  methods: {    onSubmit() {      //判斷表單是否符合規(guī)則      this.$refs["loginForm"].validate((valid) => {  if (valid) {    if (this.loginUser.username !== "123456" || this.loginUser.password !== "123456"){      this.$message({message:"賬號(hào)或密碼錯(cuò)誤",type: "error",      });      return;    }    auth.setAdminInfo(this.loginUser);    this.$router.push({path:"/home"});  }}      )    },    resetForm(){      this.$refs["loginForm"].resetFields();    },  }}</script><style scoped>.login-box {  border: 1px solid #DCDFE6;  width: 400px;  margin: 180px auto;  padding: 35px 35px 15px 35px;  border-radius: 5px;}</style>

5、編寫一個(gè)退出頁(yè)面，用戶退出以后，將用戶信息從cookie中去除，跳轉(zhuǎn)到登陸頁(yè)面

?<template>  <div>    <h1>主頁(yè)面</h1>    <el-button @click="logout">退出登錄</el-button>  </div></template><script>import * as auth from "../utils/auth"export default {  name : "Home",  data() {    return {    };  },  methods: {    logout(){      auth.removeAdminInfo();      this.$router.push({path:"/loginCard"});    }  },  mounted() {  }}</script>

基本目錄結(jié)構(gòu)是這樣的

到此這篇關(guān)于Vue學(xué)習(xí)：實(shí)現(xiàn)用戶沒(méi)有登陸時(shí)，訪問(wèn)后自動(dòng)跳轉(zhuǎn)登錄頁(yè)面的文章就介紹到這了,更多相關(guān)Vue自動(dòng)跳轉(zhuǎn)登錄頁(yè)面內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！