使用vue进行登录后路由跳转处理

接上文登录页面编写

登录成功后在components文件夹下新建Home.vue:

<template>
  <div>
    Home组件
  </div>
</template>

<script>
  export default {
    name: "Home"
  }
</script>

<style lang="less" scoped>

</style>

router文件夹下index.js修改为：

import Vue from 'vue'
import VueRouter from 'vue-router'

import login from "../components/login";
import home from "../components/Home"

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect:'/login'
  },
  {
    path:'/login',
    component:login
  },
  {
    path:'/home',
    component:home
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

login.vue的methods下的Login方法修改为：

 Login() {
        // 预验证
        this.$refs.loginFormRef.validate(async valid => {
          //未验证通过则直接return
          if (!valid) return;
          //不加await的化不会打印出数据，await只能用于async修饰的函数
          // const {data:res} = await this.$http.post('pro/login', this.loginForm).catch(() => this.$message.error("登录失败,请联系Tel:"))
          const response = await this.$http.post('pro/login', this.loginForm).catch(() => this.$message.error("登录失败,请联系Tel:"))
          // {data:res}解构，将得到的返回值的data解构为res
          console.log(response.data)
          // console.log(res.meta.statusText)
          //从res的元数据中得到返回状态
          if (response.status !== 200) return;
          if (response.data.token) {
            // 1，将登录成功之后的token，保存到客户端的sessionStorage(会话存储)中
            // 1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问
            // 1.2 token只应在当前网站打开期间生效，所以token保存在sessionStorage中

            // 2，通过编程式导航跳转到后台主页。路由地址是 /home
            console.log(response.data.token);
            window.sessionStorage.setItem('token', response.data.token);
            await this.$router.push("/home");
            return this.$message.success("登录成功");
          };
          if (response.data.error) return this.$message.error(response.data.error);
        });
      },

运行，输入账号密码后登录：
可见成功跳转
token已成功存储在sessionStorage(会话存储)中

下一步：
使用导航守卫，根据sessionStorage中是否有token判断登录与否