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() {//登出清空本地sessionwindow.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. 效果展示