第十四课 加入路由守卫

用户在未登录或者退出后不让访问非登录页面，解决方案是用路由守卫来判断。

一、在src/permission.js，新增文件

import router from './router/index.js'
import {getUserInfo} from "./api/login"

router.beforeEach((to,from,next)=>{
    const token = localStorage.getItem("manager-user");
    //没有获取到token
    if(!token){
        if(to.path !=='/login'){
            next({path:'/login'})
        }else{
            next()
        }
    }else{
        if(to.path =='/login'){
            next()
        }else{
            const userinfo = localStorage.getItem('manager-user');
            if(userinfo){
                next()
            }else{
                getUserInfo(token).then(response=>{
                    const respUser = response.data
                    if(respUser.flag){
                        localStorage.setItem('manager-user',JSON.stringify(respUser))
                        next()
                    }else{
                        next({path:'/login'})
                    }
                })
            }
        }
    }
})

二、在全局main.js中引入

import './permission'

三、在src/components/AppMain/index.vue,

修改判断信息，当然你也可以在路由配置上加入redirect，重定向home页面

 <el-breadcrumb separator-class="el-icon-arrow-right" v-show="$route.path !='/home' && $route.path !='/'">
 
 
 path: '/',
 name: 'Layout',
 redirect:'home',《------
 component: Layout,