实现登录才可以访问

由于需要进行cookie的读写，我们采用vue-cookies这个包

npm i vue-cookies

import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

设置cookie值的语法：

$cookies.set(keyName, value[, expireTimes[, path[, domain[, secure]]]]) 

我们在全局路由守卫中加上cookie的判断

//使用beforeEach，去设定一个函数，这个函数会在任何的路径被访问的时候，都会触发
router.beforeEach((to, from, next) => {
  console.log(to)
  if (to.fullPath == '/login') {
    next()
  } else {
    //读取cookie中的user值
    var user = Vue.$cookies.get('user')
    if (user) {
      next();
    } else {
      next('/login')
    }
  }
})

登录页代码:

<template>
  <div class="hello">
    <h1>登录</h1>
    <p>
      <label for=""><input type="text" v-model="loginname"></label>
    </p>
    <p>
      <label for=""><input type="password" v-model="password"></label>
    </p>
    <button @click="login">登录</button>

  </div>
</template>

<script>
export default {
  data(){
    return {
      loginname:"",
      password:""
    }
  },
  methods:{
    login(){
    //登录的时候设置cookie
     this.$cookies.set('user',this.loginname,'10s');
     //跳到home页
     this.$router.push('/home')
    }
  }
}
</script>

实现登录控制后，我们可以做一些改进，让用户登录后，可以会到之前想要访问的页面。

//使用beforeEach，去设定一个函数，这个函数会在任何的路径被访问的时候，都会触发
router.beforeEach((to, from, next) => {
  console.log(to)
  if (to.path == '/login') {
    next()
  } else {
    var user = Vue.$cookies.get('user')
    if (user) {
      next();
    } else {
      //优化一下，要访问的路径添加到query当中
      next({path:'/login',query:{returnUrl:to.fullPath}})
    }
  }
})

登录页的login函数：

  login(){
     this.$cookies.set('user',this.loginname,'10s');
     var returnUrl=this.$route.query.returnUrl;
     //加上判断有没有要返回的页面地址
     if(returnUrl){
       //登录完毕，回到原来的页面
       this.$router.push(returnUrl);
     }else{
       //到home页
       this.$router.push('/home')
     }
    }