第4章 vue全家桶（vue-router+vuex）- 4.12 如何使用全局守卫做登录操作5个步骤：

本文链接：https://blog.csdn.net/jolinoy/article/details/123305630

上面是项目录，项目的搭建请查看：第4章 vue全家桶（vue-router+vuex）- 4.11 命名视图的使用

本章只展示本章学习的内容代码。

先看一下操作步骤：

//如何使用全局守卫做登录操作5个步骤：
//1.在views文件夹下面新建两个组件：Login.vue和Notes.vue
//2.在index.js里面挂载
//3.在App.vue里面展示
//4.在main.js面创建全局守卫
//5.在Login.vue里面设置登录方法

1.在views文件夹下面新建两个组件：Login.vue和Notes.vue

这两个组件在上面的目录里面可以看出来，代码分别如下：

// Login.vue里面的内容

<template>
    <div>
        <h2>登陆页面</h2>
        <input type="text" v-model="user">  <!-- //全局守卫步骤5： -->
        <input type="password" v-model="pwd">
        <button @click="handleLogin">登录</button>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                user:'',
                pwd:''
            }
        },
        methods:{
            handleLogin(){
                //1.获取用户名和密码
                //2.与后端发生交互
                setTimeout(()=>{
                    let data = {
                        user:this.user
                    }
                    //保存用户名到本地
                    localStorage.setItem('user',JSON.stringify(data));
                    this.$router.push({
                        //跳转到我的笔记页
                        name:'notes'
                    })
                },1000)
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

Notes.vue代码：

// Notes.vue里面的内容

<template>
    <div>
        <h2>我的笔记</h2>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>

</style>

2.在index.js里面挂载

// index.js里面的内容

import Vue from 'vue';
// 1.导入
import VueRouter from 'vue-router';
// 2.模块化机制，使用Router
import Home from '../views/Home.vue';
import User from '@/views/User';  //@等同于..
// 3.创建路由器对象

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',  //history模式，是干净的路由地址，即在地址栏里面没有#
  base: process.env.BASE_URL,
  // routes
  routes:[
    {
      path:'/',
      // redirect:'/home'
      redirect:{name:'home'} //路由重定向，即：http://localhost:8083回车跳转到http://localhost:8083/home，显示页面还是同一个页面。
    },
    {
      path: '/home',
      name: 'home',
      // component: HomeView
      components:{  //命名视图步骤2：挂载侧边栏。
        default:Home, //默认的名字
        main:()=>import('@/views/Main'),
        sideBar:()=>import('@//views/SideBar')
      }
    },
    //同一个路径可以匹配多个路由，匹配的优先级按照路由的定义顺序：谁先定义的，谁的优先级最高
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    // {
    //   path:'/about',
    //   name:'about',
    //   component:HomeView
    // },
    {
      path:'/user/:id',  //:id就是动态路由匹配
      name:'user',
      component:User,
      // props:true  //传值1.props值为true时，将path里面的id传递给component里面的User.vue里面。
      
      //下面是通过props传id和title。
      props:(route)=>({
        id:route.params.id,
        title:route.query.title
      }),
      children:[  //嵌套路由的使用步骤2：创建子组件children
        {
          path:'profile', //这里一定不能加/，因为/在路由中已经存在了。
          component:()=>import('@/views/Profile')
        },
        {
          path:'posts',
          component:()=>import('@/views/Posts')
        },
      ]
    },
    { //如何使用全局守卫做登录操作步骤2：
      path:'/notes',
      name:'notes',
      component:()=>import('@/views/Notes')
    },
    {
      path:'/login',
      name:'login',
      component:()=>import('@/views/Login')
    },
    //http://localhost:8083/page?id=1&title=foo   query
    {
      path:'/page',
      name:'page',
      component:()=>import('@/views/Page'),  //这里的方法等同于import page from '../views/Page.vue'
      alias:'/aaa'  //给路由起别名
      //给路由起别名(用的很少)http://localhost:8083/user/page?id=1&title=foo和http://localhost:8083/aaa都可以访问Page页面
    },
    {
      path:'/user-*',  //*是通配符
      component:()=>('@/views/User-admin')
    }, 
    {
      path:'*',
      component:()=>import('@/views/404')  //路由的执行顺序是从上到下，所以404永远要放在最后面。
    }
  
  ]
})

export default router


// http://localhost:8081/user/1
// http://localhost:8081/user/2
// 同一个页面



//路由跳转：前端和后端结构不一样，就需要使用嵌套路由了。
//总共分四步搭建嵌套路由。
//嵌套路由的使用步骤1：在views文件夹下面新建两个组件Posts.vue和Profile.vue


//命名视图总共分为3步骤：
//命名视图步骤1：首先在views文件夹下面新建两个组件Main.vue和SideBar.vue
//命名视图步骤2：在index.js里面挂载侧边栏。
//命名视图步骤3：在App.vue添加渲染

3.在App.vue里面展示

App.vue代码：

// App.vue里面的内容

<template>
  <div id="app">
    <nav> <!-- //<nav> 标签定义导航链接的部分 -->
      <!-- //router_link相当于a标签，to属性相当于a标签的href -->

      <!-- //<router-link to="/">Home</router-link> | 这是静态路由
      <//router-link to="/about">About</> -->
      <router-link :to="{name:'home'}">Home</router-link> | <!-- 加：，这是动态路由 -->
      <router-link :to="{name:'about'}">About</router-link> |
      <!-- 声名式导航 -->
      <router-link :to="{name:'user',params:{id:1}}">User1</router-link>  |  <!-- //params是参数的意思。 -->
      <router-link :to="{name:'user',params:{id:2}}">User2</router-link>  |
      <router-link :to="{name:'page',query:{id:1,title:'foo'}}">Page</router-link>  |
      <!-- 路由嵌套 -->
      <router-link to='user/1/profile'>user/1/profile</router-link>  |   <!-- //嵌套路由的使用步骤3：定制路由跳转-->
      <router-link to='user/1/posts'>user/1/posts</router-link> |
      <router-link :to="{name:'notes'}">我的笔记</router-link>  <!--//如何使用全局守卫做登录操作步骤3：-->
      <!-- //router-view相当于路由组件的出口 -->
    </nav>
    <router-view/>  <!-- router-view是路由出口，在这里渲染Home -->      
    <router-view name="main" class="main"></router-view>  <!--//命名视图步骤3：添加渲染-->
    <router-view name="sideBar" class="sideBar"></router-view>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

4.在main.js面创建全局守卫

// main.js里面的内容

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

//全局守卫
router.beforeEach((to,from,next)=>{ //如何使用全局守卫做登录操作步骤4：
  //用户访问了/notes
  if(to.path === '/notes'){
    //获取用户登录的信息
    const user = JSON.parse(localStorage.getItem('user'));
    if(user){
      //用户已登录
      next();
    }else{
      //用户没有登录，跳转到登录页面
      next('/login');
    }
  }
  next();
})
new Vue({
  // 4.挂载到vue实例中
  router,
  render: h => h(App)
}).$mount('#app')


//如何使用全局守卫做登录操作5个步骤：
//1.在views文件夹下面新建两个组件：Login.vue和Notes.vue
//2.在index.js里面挂载
//3.在App.vue里面展示
//4.在main.js面创建全局守卫
//5.在Login.vue里面设置登录方法