vue 用户登录 路由拦截 vuex cookie

功能：

// 页面跳转后发送ajax请求给后端 请求详细信息

//点击课程推荐跳转到推荐课程详细

// 页面刚加载立即执行函数 = mounted

<template>
  <div>
    <img :src="detail.img" />
    <h1>{{ detail.title }}</h1>
    <h3>{{detail.slogon }}</h3>
    <h5>{{ detail.level }}</h5>
    <p>{{ detail.why }}</p>
    <div>
      <ul v-for="item in detail.chapter">
        <li>{{ item.title }}</li>
      </ul>
    </div>
    <br/>
    推荐课程：
    <div>
      <ul v-for="item in detail.recommends">
        <!-- 这个方式有问题 -->
        <!-- <li><router-link :to="{name:'index',query:{id:item.id}}">{{ item.title }}</router-link></li> -->
        <li @click="changeDetail(item.id)">{{ item.title }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "CourseDetail",
  data() {
    return {
      index: "CourseDetail",

      detail: {
        course: null,
        img: null,
        level: null,
        slogon: null,
        title: null,
        why: null,
        chapter: [],
        recommends: []
      }
    };
  },
  // created:在模板渲染成html前调用
  mounted() {

    var id = this.$route.query.id;
    this.getRouterData(id);

  },
  methods: {
    getRouterData(nid) {

      // 发送ajax请求给后端 请求详细信息
      var _this = this;

      this.$axios
        .request({
          url: this.$store.state.apiList.coursedetail+nid+'/',
          methods: "GET"
        })
        .then(function(ret) {
          // ajax请求发送成功后，获取的响应内容
          // ret.data=
          if (ret.data.code === 1000) {
            _this.detail = ret.data.data;
          }
        })
        .catch(function(ret) {
          // ajax请求发送失败后，获取的响应内容
        });
    },
    //点击课程推荐跳转到推荐课程详细
    changeDetail(id){
      // 我需要重新调用getRouterData 向后端请求数据,不然不然会显示为空
      this.getRouterData(id)
      this.$router.push({name:'CourseDetail',query:{id:id}})

    }
  }
};
</script>

<style scoped>
</style>

功能（2）

// 登录

//使用$store

// router.beforeEach 全局页面阻拦钩子

// router.beforeEach 局部认证钩子

// cookie 设置

// router.beforeEach 全局页面认证钩子

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

// 导入store组件
import store from './store/store'

// 导入axios用于发送数据给后端
import axios from 'axios'
//在vue的全局变量中设置了 $axios = axios
// 以后每个组件使用时： this.$axios
Vue.prototype.$axios = axios

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

// 这是一个全局路由限制钩子 一般用来做一些进入页面前的限制
router.beforeEach(function(to, from, next){
  // to    表示即将要进入的路由对象
  //from   表示即将要离开的路由对象
  //next   是继续跳转或中断的方法
 // 如果路由meta.requireAuth参数 为ture 我需要检查下他的token值有才能让他访问
  if (to.meta.requireAuth) {
//     // 要去的url只有登录成功后才能访问
    if (store.state.token){
//       // /我就往下走
      next()
    }else{
      next(
         // 页面跳转 传了个值 一个路径 ,to.fullPath = 你当前要点击要跳转的路径
         next({name: 'Login',query: {backUrl: to.fullPath}})

      )
    }
// 如果 路由中 没有定义要 校验限制进入，就直接进入
  }else{
    next()
  }
})

cookie 设置

import Vue from 'vue'
import Vuex from 'Vuex'
import Cookie from 'vue-cookies'

Vue.use(Vuex)

// 组件中通过 this.$store.state.username 调用
const state = {
    // Cookie里面有值的话我就在cookie里面取值，没有我就自动注销
        username: Cookie.get('username'),
        token: Cookie.get('token'),
        apiList: {
            course: "http://127.0.0.1:8000/api/v1/course/",
            coursedetail:`http://127.0.0.1:8000/api/v1/coursedetail/` ,
            auth:'http://127.0.0.1:8000/api/v1/auth/',

        },
    }

const mutations = {
    // 组件中通过this.$store.commit(参数)调用
    //设置kookie
    saveToken(state, userToken) {

        // userToken 传过来的是一个对象,我可以通过点取值
        state.username = userToken.username;
        state.token = userToken.token;
        Cookie.set('username', userToken.username, "20min")
        Cookie.set('token', userToken.token, "20min")
    },
    // 清除 cookie
    clearToken: function (state) {
        state.username = null
        state.token = null
        Cookie.remove('username')
        Cookie.remove('token')
    }
}

export default new Vuex.Store({
    state,
    mutations,

})

功能（3）

// 登录 (登录后我就直接 跳转到他之前点击的页面)

<template>
    <div>
        <h1>登录页面</h1>
        <div>账号
            <input type="text" placeholder="请输入用户名" v-model="username">
        </div>
        <div>
            密码
            <input type="password" placeholder="请输入密码" v-model="password">
        </div>
        <div>
            <input type="button" value="登录" @click="doLogin">

        </div>

    </div>
</template>

<script>
export default {
    name:'Login',
    data(){
        return{
            username:'',
            password:'',

        }
    },
    methods:{
        doLogin:function(){
            var _this = this

            this.$axios.request({
                url:this.$store.state.apiList.auth,
                method:'POST',
                data:{
                    user:this.username,
                    pwd:this.password
                },
                headers:{
                    'Content-Type':'application/json'
                }
            }).then(function(arg){
                // 拿到后端的状态码进行判断
                if(arg.data.code === 1000){
                    // 把token 放到state中共享
                    // _this.$store.state.token = arg.data.token
                    //  _this.$store.state.username = _this.username

                    // saveToken 是一个参数,第二个参数我传了一个对象进去
                    _this.$store.commit('saveToken',{'token':arg.data.token,'username':_this.username})

                    //这个是我点击后发现没有登录 跳转过来的页面$route.query.backUrl是有值的
                    //登录后我就直接 跳转到他之前点击的页面
                    var url = _this.$route.query.backUrl
                    if(url){
                        _this.$router.push({path:url})
                    // 如果是直接登录的话 我就跳转到主页面
                    }else{
                        _this.$route.push({path:'/'})

                    }
                }else{
                    alert(arg.data.error)

                }

            }).catch(function(arg){
                console.log(发生错误)

            })
        }
    }
}
</script>>

<style scoped>

</style>

// (局部限制) 你必须带token 才能访问我

    mounted(){
        if(!this.$store.state.token){
            this.$router.push({name:'login'})
        }
    }

路由中的设置

import Vue from 'vue'
import Router from 'vue-router'

// 引入路由页面
import Homepag from '@/components/Homepag'
import Course from '@/components/Course'
import CourseDetail from '@/components/CourseDetail'
import Login from '@/components/Login'
import FeatureLeesion from '@/components/FeatureLeesion'

//引入elment快速搭建
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//使用elment组件
Vue.use(ElementUI);

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Homepag',
      component: Homepag,
      meta:{
        requireAuth:true
      }
    },
    {
      path: '/course',
      name: 'Course',
      component: Course,
      meta:{
        requireAuth:true
      }
    },
    {
      path: '/coursedetail/:id',
      name: 'CourseDetail',
      component: CourseDetail,
      meta:{
        requireAuth:true
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
      meta:{
        requireAuth:false
      }
    },
    {
      path: '/featureleesion',
      name: 'FeatureLeesion',
      component: FeatureLeesion,
      meta:{
        requireAuth:true
      }
    },
  ]
})