6. 发起 axios 请求步骤 sessionStorage 和 localStorage 权限访问 vue文件的格式化

0. 前端 和 后端技术

前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts
后端技术栈：Node.js,Express,Jwt(模拟session),Mysql,Sequelize(操作数据库的框架)

1. 发起 axios 请求步骤

// 在 vue 项目 main.js 中配置 axios
npm install axios  或者   yarn add axios

// 导入 axios 并设置 默认地址
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios

// 在 vue 项目单文件中 发送请求  例如： Login.vue
loginForm: {
                username: 'admin',
                password: '123456'
            },

login() {
            this.$refs.loginFormRef.validate( async valid => {
                // 如果 返回的 false 直接返回 不执行后续操作
                if(!valid) return;  // this.loginForm 是参数
                const {data: res} = await this.$http.post("/login", this.loginForm)
                if(res.meta.status !== 200) return this.$message.error("登录失败")
                this.$message.success("登录成功")
            })
        }

注意： 请求 返回的是 promise   promise 可以使用 async await (await 必须在 async 的函数内)

<br />

2. 将 属性 挂载到 vue 原型上

// 在 vue  的 main.js 页面
Vue.prototype.$http = axios

// 后续 都可以在 .vue所有页面上使用 this.$http 就可以访问的到
this.$http.post("/login", { username: 'admin', password: '123456'})

<br />

3. 设置 sessionStorage 和 localStorage

// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
                //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
                //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
                window.sessionStorage.setItem("token", res.data.token)
                // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
                this.$router.push('/home')

// 添加 sessionStorage
window.sessionStorage.setItem("token", res.data.token)
// 获取 sessionStorage 的数据
let data = sessionStorage.getItem('token');

// 添加 localStorage
window.localStorage.setItem("token", res.data.token)
// 获取 localStorage 的数据
let cat = localStorage.getItem('token');

sessionStorage 和 localStorage 的生命周期不一样 sessionStorage 关闭页面 数据就被清理了， localStorage 必须要手动删除 数据才会被清理掉

MDN 网址： https://developer.mozilla.org/zh-CN/   在MDN里面搜索 sessionStorage 和 localStorage 查看详细教程

<br />

4. 访问权限 （只有登录了才能访问到）

// 挂载路由导航守卫  router.js 文件
router.beforeEach( (to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // next 是一个函数，表示放行
  //     next()  放行    next('/login')  强制跳转
  if(to.path === "/login") return next()
  // 获取token
  const tokenStr = window.sessionStorage.getItem('token')
  if(!tokenStr) return next("/login")
  next()
})

// 退出功能
        logout() {
            // 清空 token
            window.sessionStorage.clear()
            // 返回 登录页面
            this.$router.push("/login")
        }

<br />

5. 格式文档

// 在项目根目录添加 .prettierrc 文件  "semi":false, 表示; 改为,  "singleQuote":true  表示 使用单引号
{
    "semi":false,
    "singleQuote":true
}

// 打开.eslintrc.js文件，禁用对 space-before-function-paren 的检查:
// 'space-before-function-paren' : 0 表示取消函数后空格检测  例如： login() {}
rules: {
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'space-before-function-paren' : 0
  },