08.a-全局前置守卫案例-登陆判断路由

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'url'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    }
  }
})

url 在 @type/node 里 ，package.json

 "devDependencies": {
    "@types/node": "^18.11.18",
    "@vitejs/plugin-vue": "^4.0.0",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "typescript": "^4.9.3",
    "vite": "^4.0.0",
    "vue-tsc": "^1.0.11"
  }

main.ts

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import router from './router'
import ElementUi from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)


app.use(router)
app.use(ElementUi)

const whiteList = ['/']

//全局前置守卫
router.beforeEach((to, from, next) => {
  let token = localStorage.getItem('token')
  //白名单 有值 或者登陆过存储了token信息可以跳转 否则就去登录页面
  if (whiteList.includes(to.path) || token) { //token每次都要跟后端校验一下是否过期
    //另外说一下beforeEach可以定义不止一个，vue会收集你所有定义的路由钩子，所以next的作用不应该是跳转，而是使步骤进行到下一个你定义的钩子
    next()
  } else {
    next('/')
  }
})


app.mount('#app')

App.vue

<template>
  <router-view></router-view>

</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

</script>

<style>
* {
  padding: 0;
  margin: 0;
}

html,
body,
#app {
  height: 100%;
  overflow: hidden;
}
</style>

views/Login.vue

<template>

  <div class="login">
    <el-form ref="form" :rules="rules" :model="formInline" class="demo-form-inline">
      <el-form-item prop="user" label="账号：">
        <el-input v-model="formInline.user" placeholder="请输入账号" />
      </el-form-item>
      <el-form-item prop="password" label="密码：">
        <el-input v-model="formInline.password" placeholder="请输入密码" type="password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登陆</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import router from '../router';
import { ElMessage, FormRules, FormInstance } from 'element-plus'


const formInline = reactive({
  user: '',
  password: '',
})


const form = ref<FormInstance>()

const rules: FormRules = reactive({
  user: [{
    required: true,
    message: "请输入账号",
    type: "string"
  }],
  password: [{
    required: true,
    message: "请输入密码",
    type: "string"
  }]
})

const onSubmit = () => {
  console.log('submit!', form.value)
  form.value?.validate((validate) => {
    if (validate) {
      router.push('/index')
      localStorage.setItem('token', '1')
    } else {
      ElMessage.error('请输入完整')
    }
  })

}
</script>

<style lang='less' scoped>
.login {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

views/index.vue

<template>

  <div>
    哈哈，我进来了
  </div>

</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

</script>

<style lang='less' scoped>

</style>

router/index.ts

//引入路由对象
import { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = []


const router = createRouter({
  history: createWebHistory(),
  routes: [//配置信息
    {
      path: '/',
      component: () => import('@/views/Login.vue')
    },
    {
      path: '/index',
      component: () => import('@/views/index.vue')
    }
  ]
})

//导出router
export default router