fix #8325: Docs example axios token visibility (#8326)

* cs (czech) lang (#1874)

Hi guys, here is PR for Czech language :)

* fix bug with q-parallax when using ssr (#7196)

* Docs: Add an api instance to avoid insecure assignment of access tokens

This change adds consistency across axios boot files examples in docs,
and makes the default examples less error prone from unintentional
inclusion of Authorization tokens to 3rd party services

* Add some Markdown 'js' highlight types on code blocks, and closing brace

* Update ajax-requests.md

* Update boot-files.md

Co-authored-by: VonSandberg <nahlovsky.j@gmail.com>
Co-authored-by: Razvan Stoenescu <razvan.stoenescu@gmail.com>
Co-authored-by: SeanDylanGoff <sean318@hotmail.ch>
Co-authored-by: Allan Gaunt <allangaunt@gmail.com>

docs/src/pages/quasar-cli/ajax-requests.md

@@ -18,6 +18,13 @@ import axios from 'axios'
 Vue.prototype.$axios = axios
 // ^ ^ ^ this will allow you to use this.$axios
 //       so you won't necessarily have to import axios in each vue file
+
+const api = axios.create({ baseURL: 'https://api.example.com' })
+Vue.prototype.$api = api
+// ^ ^ ^ this will allow you to use this.$api
+//       so you can easily perform requests against your app's API
+
+export { axios, api }
 ```
 
 Also make sure to yarn/npm install the `axios` package.
@@ -29,9 +36,11 @@ Be sure to check out [Prefetch Feature](/quasar-cli/prefetch-feature) if you are
 Usage in your single file components methods will be like:
 
 ```js
+import { api } from 'boot/axios'
+
 methods: {
   loadData () {
-    this.$axios.get('/api/backend')
+    api.get('/api/backend')
       .then((response) => {
         this.data = response.data
       })
@@ -44,24 +53,21 @@ methods: {
         })
       })
   },
+}
 ```
 
 Usage in Vuex Actions for globally adding headers to axios (such as during authentication):
 
 ```js
-import axios from 'axios'
+import { api } from 'boot/axios'
 
 export function register ({commit}, form) {
-  return axios.post('api/auth/register', form)
+  return api.post('/auth/register', form)
     .then(response => {
+      api.defaults.headers.common['Authorization'] = 'Bearer ' + response.data.token
       commit('login', {token: response.data.token, user: response.data.user})
-      setAxiosHeaders(response.data.token)
     })
 }
-
-function setAxiosHeaders (token) {
-  axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
-}
 ```
 
 Also look at [Axios docs](https://github.com/axios/axios) for more information.

docs/src/pages/quasar-cli/boot-files.md

@@ -255,11 +255,15 @@ import Vue from 'vue'
 import axios from 'axios'
 
 // we add it to Vue prototype
-// so we can reference it in Vue files
-// without the need to import axios
+// so we can reference it in Vue files as this.$axios
+// without the need to import axios or use vue-axios
 Vue.prototype.$axios = axios
 
-// Example: this.$axios will reference Axios now so you don't need stuff like vue-axios
+// can also create an axios instance specifically for the backend API
+const api = axios.create({ baseURL: 'https://api.example.com' })
+Vue.prototype.$api = api
+
+export { axios, api }
 ```
 
 ### vue-i18n
@@ -316,23 +320,24 @@ import axios from 'axios'
 // We create our own axios instance and set a custom base URL.
 // Note that if we wouldn't set any config here we do not need
 // a named export, as we could just `import axios from 'axios'`
-const axiosInstance = axios.create({
+const api = axios.create({
   baseURL: 'https://api.example.com'
 })
 
-// for use inside Vue files through this.$axios
-Vue.prototype.$axios = axiosInstance
+// for use inside Vue files through this.$axios and this.$api
+Vue.prototype.$axios = axios
+Vue.prototype.$api   = api
 
 // Here we define a named export
 // that we can later use inside .js files:
-export { axiosInstance }
+export { axios, api }
 ```
 
 In any JavaScript file, you'll be able to import the axios instance like this.
 
 ```js
 // we import one of the named exports from src/boot/axios.js
-import { axiosInstance } from 'boot/axios'
+import { api } from 'boot/axios'
 ```
 
 Further reading on syntax: [ES6 import](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import), [ES6 export](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export).