设置路由前置守卫

路由前置守卫,是否存在token的情况下设置跳转路径 .

1.在request.js页面中导入路由,store

import router from '@/router'    //这里的router引入的是路径,router文件夹中存在index.js为默认路径.

2.设置前置守卫 (beforeEach)

router.beforeEach((to,from,next)=>{ })   //箭头函数的参数有三个参数,
                                       //分别表示to--去哪里,from--来自哪里,next--是否通行

3.设置白名单,让一些页面即使在没有token的情况也能通过,比如'404'页面和'login'页面

const whiteList = ['/404','/login']

4.判断是否有token , 在store中直接获取

获取 store.state.token值

5.将之前的准备条件组合在一起

import router from '@router'
import store  from '@store'

const whiteList = ['/404','/login']

router.beforeEach((to,from,next)=>{
    if(!store.state.token){    //如果页面不存在token情况下
        if(whiteList.includes(to.path)){//若去的页面在白名单之列,放行
                next()
            } else{
            next('/login')  //不在白名单有没有token,只能去登录页面
            }
    }else{
        if(to.path==='/login')  //存在token,但是要去的页面时登录页,只能通过退出按钮,否则会到达首页
        next('/')    //去首页
    }else{
        next()   //若已有token,去往的路径也不在名单之中,直接放行
    }
})

思维步骤如图