24vue-- 登录路由守卫控制

vue-24 登录路由守卫控制

视频：

https://www.bilibili.com/video/BV1EE411B7SU?p=25

知识点：

路由守卫控制访问：如果没有登录有些页面不能访问，跳转到登录，登录后才可以


// 为路由对象，添加beforeEach 导航守卫，
router.beforeEach((to, from, next) => {
    // to 目的是哪里
    //from 从哪里访问
    // next 去哪里 next('/login') 表示强制跳转到login的路径
    if(to.path === '/login') return next() // 如果是访问login页面，就放行
    const tokenStr = window.sessionStorage.getItem('token')// 获取本地sessionStroage内的token的值
    if(!token) return next('/login') // 如果没有token，就强制跳转到login登录界面
    next()// 如果有token，就可以继续访问
})

code

修改点：本次修改的地方

router.beforeEach((to, from, next) => {
  if(to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if(!tokenStr) return next('/login')
  next()
})

router.js 看完整代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
// import { from } from 'core-js/fn6/array'
// import 'core-js/es/array';
// Vue.use(from)

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  if(to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  if(!tokenStr) return next('/login')
  next()
})

export default router

// const router = new VueRouter ({
//   routes: [
//     { path: '/', redirect: '/login' },
//     { path: '/login', component: Login},
//     { path: '/home', component: Home},
//   ]
// })
// // 添加导航守卫
// // beforeEach 内是一个回调函数  有三个参数 to from next
// router.beforeEach((to, from, next) => {
//   if(to.path === '/login') return next()
//   const tokenStr = window.sessionStorage.getItem('token')
//   if(!tokenStr) return next('/login')
//   next()
// })

// export default router

报错

报错内容：

This dependency was not found:  
* core-js/fn/array in ./src/router/index.js  
To install it, you can run: npm install --save core-js/fn/array

解决：npm install core-js@3

效果