Java登陆第四十天——Router路由守卫练习

需求

未登录无法访问除login页面

练习

1.使用vite创建项目，导入依赖

npm create vite	选择vue+js
npm i	导入基本依赖
npm vue-router	导入路由依赖

2. 创建组件，login.vue、home.vue、list.vue

仅展示home.vue组件，其他都一样。

<script setup>

</script>

<template>
<h3>我是home.vue</h3>
</template>

<style scoped>

</style>

3. 创建src\routers\router.js，路由配置文件

import {createRouter, createWebHashHistory} from "vue-router";
import Home from '../components/home.vue'
import List from '../components/list.vue'
import Login from '../components/login.vue'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        //定义首页
        {path: '/', component: Home},
        {path: '/home', component: Home},
        {path: '/list', component: List},
        {path: '/login', component: Login}
    ]
})

4. main.js绑定路由

import {createApp} from 'vue'
import App from './App.vue'
import router from './routers/router'

let app = createApp(App)
app.use(router)
app.mount('#app')

5. 编辑App.vue组件，测试路由效果

<script setup>
</script>

<template>
  <h3>我是app.vue</h3>
  <router-link to="/list">list</router-link>丨
  <router-link to="/home">home</router-link>丨
  <router-link to="/login">login</router-link>
  <router-view></router-view>
  <h3>app.vue尾页</h3>
</template>

<style scoped>
</style>

6. 编辑login.vue组件，测试标签效果

<script setup>
import {ref} from 'vue'

let uname = ref('');
let upwd = ref('');

function l() {
    console.log(uname.value+upwd.value);
}

function out() {
  console.log("out");
}
</script>

<template>
  <h3>我是login.vue</h3>
  用户名：<input type="text" v-model="uname">
  密码：<input type="password" v-model="upwd">
  <input type="submit" value="提交" @click="l()">
  <input type="button" value="登出" @click="out()">
</template>

<style scoped>
</style>

7. 继续编辑login.vue组件，测试window.sessionStorage对象

<script setup>
import {ref} from 'vue'

let uname = ref('');
let upwd = ref('');

function l() {
  if (uname.value === 'root' && upwd.value === '123') {
    //正确在本地session中记录
    window.sessionStorage.setItem("username", uname.value);
    window.sessionStorage.setItem("userpwd", upwd.value);
  } else {
    console.log("用户名或密码错误")
  }
}

function out() {
  //登出清空本地session
  window.sessionStorage.clear();
}

</script>

<template>
  <h3>我是login.vue</h3>
  用户名：<input type="text" v-model="uname">
  密码：<input type="password" v-model="upwd">
  <input type="submit" value="提交" @click="l()">
  <input type="button" value="登出" @click="out()">
</template>

<style scoped>
</style>

8. 编辑路由配置文件，编写路由守卫

import {createRouter, createWebHashHistory} from "vue-router";
import Home from '../components/home.vue'
import List from '../components/list.vue'
import Login from '../components/login.vue'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        //定义首页
        {path: '/', component: Home},
        {path: '/home', component: Home},
        {path: '/list', component: List},
        {path: '/login', component: Login}
    ]
})

router.beforeEach((to, from, next) => {

    if (to.path === '/login') { //如果用户要去登录页面，放行
        next()
    } else { //如果用户不去登录页面
        let u = window.sessionStorage.getItem("username")//获取用户本地session的username值
        if (u != null) {//不为空就是已经登陆过了，放行
            next();
        } else {//为空就重定向到登录页面去
            next('/login')
        }
    }
})

router.afterEach( (to,from)=>{
    //模板字符串
    console.log(`从哪里来:${from.path},到哪里去:${to.path}`)
} )

export default router;

9. 效果展示