[JavaScript知识库]Web前端vue必做笔记之一：token验证登录状态

Web前端vue必做笔记之一：token验证登录状态

当我们登录页不输入账号和密码时，直接访问内容页路径，会发现也可以进行访问，这就会产生一个bug,这是就需要进行token验证登录

<template>
     <div> 
         
            <form @submit.prevent="login">
                 <div>
                      <label for="">用户名：</label>
                      <input type="text" v-model="username">
                 </div>
                 <div>
                      <label for="">密码：</label>
                      <input type="password" v-model="password">
                 </div>
                 <button></button>
            </form>
     </div>
</template>

<script>
export default {
    data(){
         return {
              username:'',
              password:''
         }
    },
     methods:{
           login(){
                  if(this.username === 'admin' && this.password ==='123456'){
                      this.$router.push('/')  
                      localStorage.setItem("token","xiaoming") //本地存储
                  }else{
                      
                      alert("用户名或密码错误！");
                  }
           }
     }
}
</script>

import {createRouter, createWebHashHistory} from 'vue-router'
import Home from './components/Home'
import Blog from './components/Blog'
import Login from './components/Login'
const router = createRouter({
    history:createWebHashHistory(),   //把路由设置为hash模式

    //配置路由
    router:[
          {
              path:'/', //路径
              component:Home     //跳转的组件
          },
          {
              path:'/blog',
              component:Blog
          },
          {
              path:'/login',
              component:Login
          }
    ] 
});

//导航守卫，路由守卫，路由拦截 , 
router.beforeEach((to,from,next)=>{   //from： 从哪来的， to:到那里去的， next:指定页面的跳转   
       //验证token,只有存在token的时候，才能跳转到内容页
       let token = localStorage.getItem("token"); //拿到token
       if( token || to.path === '/login'){
            next()
       }else{
           next('/login')
       }
})
//路由只要一切换就调用这个方法，在这个方法里去检测token，有token就可以访问正常页面，没有就跳转到登录页
 
 export default router