vue实现路由拦截，登录后跳转

vue实现路由拦截，登录后跳转

1.修改index.js内容

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    //添加meta属性，不可任意起名
    meta:{
      // loginRequest是一个表示符，可以任意起
      loginRequest:true
    }
  },
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue'),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

//添加路由拦截
/*
router.beforeEach((to, from, next) => {　} 三个参数：
to：即将要进入的目标 路由对象
from：当前导航正要离开的路由
next：(function函数) 调用next() 进行管道中的下一个钩子
next() 无参 进行 下一个钩子函数
next({ path:'/xxx' , query:{}}) 携带参数跳到xxx页面
 */
router.beforeEach((to,from,next)=>{
  if (to.meta.loginRequest){//如果要去的路由的meta对象的loginRequest属性为true
    if (sessionStorage.getItem('user')) {//如果已经登录，进入目标界面
        next();
    }else {//用户没有登录，直接去登录界面
      next({
        path: '/login',
        query:{
          //把目标界面的页面路径作为参数传到登录界面，方便登录后跳转目标界面
          redirect:to.fullPath
        }
      });
    }
  }else {//其他界面情况
    next();
  }
});
export default router

2.修改登录的逻辑

   //获得正确的属性
   console.log(this.formItems.account+":"+this.formItems.password);
  //在缓存中存贮用户信息,sessionStorage的过期时间就是关闭浏览器，是个临时会话窗口，
  // localStorage，这个好处就是存储空间大，长时间保存，同一浏览器，标签页全部共享，
  // 它是直接存到电脑硬盘上的
  // localStorage.setItem("user",this.formItems.account);
  sessionStorage.setItem("user",this.formItems.account);
  /*
  | this.$route：当前激活的路由的信息对象。每个对象都是局部的，
  可以获取当前路由的 path, name, params, query 等属性。
  | this.$router：全局的 router 实例。通过 vue 根实例中注入 router 实例，
  然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象
  （比如 history 对象），任何页面也都可以调用其 push(), replace(), go() 等方法。
   */
  //获得路由携带的参数,没有的话就指定'/'
  let redirect = this.$route.query.redirect || '/';
  //路由调转
  this.$router.push({path:redirect})