第二部分内容【路由权限管理方案】

用户登录完需要做什么操作？axios如何请求路由规则？

1. 用户登录需要做什么操作？

这里其实涉及到向后端发送登录请求，然后在设置cookies，接着跳转到首页。

<template>
  <div class="home">
    <input v-model="username" />
    <input v-model="password" />
    <button @click="loginIn">登录</button>
  </div>
</template>

<script>
import axios from 'axios'
import Cookies from 'js-cookie'

export default {
  name: 'login',
  data() {
    return {
      username: 'admin',
      password: '123456',
    }
  },
  methods: {
    loginIn() {
      axios
        .post(`http://localhost:3000/login`, {
          username: this.username,
          password: this.password,
        })
        .then((res) => {
          if(res.data.token){
            // 三步操作
            Cookies.set('id',res.data.id)
            Cookies.set('token',res.data.token)
            this.$router.push("/")
          }
        })
    },
  },

2. axios如何请求路由规则？

import axios from 'axios'
import Cookies from 'js-cookie'

let id =  Cookies.get('id')
axios.get(`http://localhost:3000/router/${id}`).then((res) => {
    // console.log(res.data);
    localStorage.setItem('menu', JSON.stringify(res.data))
})

res.data即使请求回来的路由规则，这里把这个规则先放倒了localStorage存放着。