VUE3登录后保存token，使用LocalStroge

1.登录成功后，后端会返回一个token。拿到这个token后，使用Localstroge进行保存。代码如下：在login.vue中：

<template>
  <div class="Login">
    <h1>用户登录</h1>
    <br/>
    <label>用户名：</label>
    <input type="text" v-model="username" placeholder="请输入您的用户名">
     <br/>
    <label>密码：</label>
    <input type="password" v-model="password" placeholder="请输入您的密码">
    <br/>
    <button type="button" @click="login">登录</button>
  </div>
</template>

<script>
import { getLogin } from '@/api/message'
export default{
  name:'login',
  data(){
    return{
      username:'',
      password:'',
    }
  },
  mounted(){

  },
  methods:{
    login(){
      //判断用户名或密码是否为空
      if(this.username === '' || this.password === ''){
        alert('用户名和密码不能为空')
      }else{
        getLogin({
          username : this.username,
          password : this.password,
        }).then((res) => {
          //回调信息
          if(res.code == '200'){
            alert(res.msg);
            this.$router.push("/");
            let token = res.result.token;
            //console.log(res.result.token);
            localStorage.setItem("token",token);
          }
        })
      }
    }
  }
}
</script>

2.在路由守卫这里，判断token是否存在，只有token存在的时候，才能跳转到内容页。在路由文件index.js里：

//导航守卫、路由守卫、路由拦截
router.beforeEach((to,from,next) =>{
  //验证token,只有存在token的时候，才能跳转到内容页
  console.log(to);
  console.log(from);
  let token = localStorage.getItem("token");
  //console.log(token);
  if(token || to.path === '/login'){
    next();
    console.log(token);
  }else{
    next("/login");
  }
})