License: MIT License
👉 You probably want to see modules.nuxtjs.org for many more ready-to-use modules.
Just head to Modules Guide or make your own module with Module Template and don't forget to submit a PR in awesome-nuxt when published ;)
MIT License
Copyright (c) Nuxt.js
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
I've run npm update and now I am getting the error
[nuxt] Module [@nuxtjs/axios,[object Object]] should export a function
Bit strange, is this a bug here or caused by another update?
npm -v
5.3.0package.json if it helps:
{
"name": "nuxt-express-symfony",
"version": "1.0.0",
"description": "Nuxt.js project",
"private": true,
"scripts": {
"dev": "cross-env HOST=127.0.0.1 PORT=8000 backpack dev",
"build": "nuxt build && backpack build",
"start": "cross-env HOST=0.0.0.0 PORT=8000 NODE_ENV=production node build/main.js",
"precommit": "npm run lint",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
},
"dependencies": {
"@nuxtjs/axios": "^2.2.4",
"@nuxtjs/component-cache": "^0.1.5",
"@nuxtjs/font-awesome": "^1.0.2",
"@nuxtjs/google-analytics": "^0.2.0",
"@nuxtjs/manifest": "^1.6.1",
"@nuxtjs/workbox": "^0.4.0",
"babel-loader": "^7.1.1",
"body-parser": "^1.17.2",
"bulma": "^0.4.4",
"connect-sqlite3": "^0.9.9",
"cookie-parser": "^1.4.3",
"cross-env": "^5.0.0",
"dotenv": "^4.0.0",
"express": "^4.15.3",
"express-session": "^1.15.4",
"install": "^0.10.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.4",
"moment": "^2.18.1",
"node-pre-gyp": "^0.6.36",
"node-sass": "^4.5.3",
"npm": "^5.3.0",
"nuxt": "^1.0.0-alpha2",
"sass-loader": "^6.0.6",
"set-cookie-parser": "^2.0.0",
"source-map-support": "^0.4.15",
"vue-clickaway": "^2.1.0",
"vue-cookie": "^1.1.4",
"vue-quill-editor": "^2.2.6",
"webpack-dev-middleware": "^1.11.0"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"backpack-core": "^0.3.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^10.2.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^2.0.3",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^4.2.3",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^3.0.1"
}
}Followed the instructions I found here, but I get the following error:
nuxt build && backpack build
[nuxt] Building...
[nuxt] Module [@nuxtjs/google-analytics,[object Object]] should export a function
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build:nuxt build && backpack build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
My nuxt.config.js has the following (UA has been replaced)
modules: [ ['@nuxtjs/google-analytics', { ua: 'UA-XXXXXXX-X' }] ]
I'm using the nuxtjs/express starter template and added:
import proxy from 'http-proxy-middleware'
app.use('/api', proxy({ target: 'http://localhost:8000', changeOrigin: true }))This works 👌
However adding:
modules: [
'@nuxtjs/proxy'
],
proxy: {
'/api': 'http://localhost:8000'
}to nuxt.config.js just gives me a 404 inside nuxt. Any ideas as to why?
I don't know where the issue lies but here is what happened:
context.app.$axios from context in middleware - it worked fine on my local machine and locally run API.import axios from 'axios instead and just performing axios.get requests instead worked fine it appeared with the same options as I had set for this plugin version.Any ideas? I don't mind leaving it importing the main axios package TBH but thought I'd raise this in case there is a way to sort it and I can keep all calls using the plugin
If I add an interceptor in middleware, it works fine from the client side, but for SSR the interceptor is not used when an Axios request is in a component's asyncData method.
When logging I can see that the interceptor is called first, and then when the request in async data is called, I can't log any output from within the interceptor signifying that a 403 status code has been detected.
In my middleware:
app.$axios.interceptors.response.use(
undefined,
(error) => {
if (error.response && error.response.status === 403 && !error.response.config.isRetry) {
// try to refresh the token
return app.$axios.post(
'/refresh_token',
{
_action: store.getters.getApiUrl('refresh_token')
},
{
baseURL: null
}
)
.then((res) => {
// We were successful with our refreshing - so time to retry the request
store.commit('setAuthUser', jwtDecode(res.data.token))
error.response.config.isRetry = true
return app.$axios(error.response.config)
})
.catch((err) => {
store.commit('setAuthUser', null)
if (err.response.status === 500) {
return Promise.reject(err)
}
// Unsuccessful responses from our middleware will result in cookies being unset anyway
// Some of these requests can be carried out without a token so we should retry anyway
error.response.config.isRetry = true
return app.$axios(error.response.config)
})
}
return Promise.reject(error)
}
)called from asyncData
let pageUrl = store.getters.getApiUrl(slug)
return app.$axios.get(pageUrl)
.then((res) => {
if (res.statusCode) {
throw new AxiosError(res.statusCode, res.message)
}
if (typeof res.data !== 'object' || !res.data.id) {
throw new AxiosError(404, '')
}
let newData = Object.assign({}, masterData, res.data)
if (store.getters.getAuthUser() && store.getters.hasRole('ROLE_ADMIN')) {
newData.patchUrl = store.getters.getApiUrl('pages/' + (slug || 'home'))
store.commit('cms/initEndpoint', newData.patchUrl)
}
return loadExtras(newData, slug, store, error)
})
.catch((err) => {
if (err.response) {
error({
statusCode: err.response.status,
message: (err.response.status === 404 ? 'Page could not be found' : err.response.data.message)
})
} else {
if (typeof err === 'string') {
error({
statusCode: 500,
message: err
})
} else {
error({
statusCode: 500,
message: 'An error occurred'
})
}
}
})This works when I just change page as a user though. Am I going about this the wrong way?
Hello sorry to make this an issue, I've tried to make this work
Exposes setToken function to $axios so we can easily and globally set authentication tokens.
but without any luck can you please explain how to make it work form a store mutation.
Thanks a lot
I'm a little hesitant to suggest a fix to the following problem, because the update could be breaking.
As it stands, the Module pushes
{pageType: 'PageView', pageUrl: to.fullPath}
The above only adds a data layer message to GTM -- and while it definitely will continue updating pageUrl after every route change... you cannot trigger anything based on it.
Essentially, without an event (custom or otherwise), there's no 'Trigger' to act upon and the information being pushed to the data layer should be useless.
There also seems to be an undocumented portion of looking for to.gtm on Route Object. I thought about adding on said gtm part, but I don't even think I could do that via middleware.
As suggested in #42 (Thanks to @pimlie), We may add better per-browser-specific favicon support for both Meta and Icon modules. This enhancement includes:
This Issue is (for now) unassigned but planned. Any contribution and comments are welcome. The only condition is that using a remote API / Webservice is not currently an option and using NPM packages for doing that locally is preferred.
I tried to set the token in middleware:
store.$axios.setToken(token)But there is a problem.
If the page is rendered from the server, the request on the page will not be accompanied by Authorization unless I jump to a new page, Let the middleware run in the browser once.
Nuxt project's goal is providing best PWA practices out-of-the box to users without need to complex project config and extra maintenance. Several attempts are already made to take such approach. We have two options for this, making nuxt.js a fully optioned framework which implements one solution for each part, this has advantage of easier first implementation, but also as a disadvantage that we need to force users only use what provided to them. To resolve this problem we have introduced modules, modules are basically enhancer functions which can access and modify almost all of nuxt internal configurations and optionally generate files using lodash templates. They are published as npm packages so community can help us to grow & have many more integrations. Another point is that easier usage that every functionality can be added by just adding module to config file.
As one of first attempts we have created a PWA template nuxt-starter-pwa (not working now). (Modules were not available so i was using a wrapper function to emulate that in nuxt config). Then we integrated modules system right into nuxt core and ported modules to this system.
This module helps automatically generate manifest.json file for projects so easier and without any pain.
Nuxt is already providing best practices to optimize projects out-of-the-box such as minification, code splitting and gzip support. However we may provide more optional optimizations to users like cssnano and webpack-lodash-plugin. We have to convert this module into a preset (~meta module) to have better maintenance of different modules.
This is our most challenging and not yet complete part. Many options are available for service workers:
sw-* (?)sw and wb ? :Dprefetch and preload links added to header of page thanks to vue-loader and client-manifest.json.preload links and adds HTTP2 Link headers (This is a workaround for web-servers like nginx that don't support push but only HTTP2)We have SSR and inlined critical path CSS thanks to vue-loader :))
I'm trying to use @nuxtjs/pwa module. It generates manifest file for me. But there are no registered service workers. And when I click on "Add to homescreen" link from devtools it throws error:
Site cannot be installed: no matching service worker detected. You may need to reload the page, or check that the service worker for the current page also controls the start URL from the manifest
An example is provided on axios github:
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));With this implementation $axios.all is not defined. It may be nice to implement this in the same way as the other main methods if possible? Or is it advisable just to import axios for this purpose?
What are your thoughts on potentially adding a module bundle example.
So if you want the Full SEO Package, you might want GTM and Analytics Together, along with other modules that may be developed in 20XX.
Simple example could be a package.json that adds a bundle of modules, set's a few common configurations or plugin options. Then publish as a module bundle.
Hey guys :)
I just tried the pwa module, it's really awesome!
when I do "npm run build", it builds.
But when I do "npm start" it tells me:
No build files found, please run `nuxt build` before launching `nuxt start`
But the build files are there.. Is this a bug or did I do something wrong?
Getting this error with [email protected]
[nuxt] Module [@nuxtjs/name, [object Object]] should export a function
Hi!
sitemap: {
path: '/sitemap.xml',
hostname: 'https://example.com',
routes () {
return Promise.resolve(['one', 'two', 'three'])
.then(res => res.map(user => '/users/' + user))
}
},It works in dev mode, but it doesn't work in production mode (npm run build, npm run start).
I cannot access the sitemap, there is just timeout and This site can’t be reached
Nothing in the logs.
@NicoPennec Could you check it?
First of all, let me say the PWA module is fantastic. It works great and got me a 100 score on lighthouse on the app I'm working on with literally 0 configuration besides adding an icon.
I did notice that after adding the 512x512 icon to /static, that the icon that's rendered in the browser is the 16x16 version, so it is very pixelated when rendered. Is there a config option to use the higher quality versions?
Thank you for working on this project, this is amazing stuff.
When I call app.$axios.get('/') from asyncData() the actual request goes to the URL /api. This works as expected.
But when I call this.$axios.get('/') from methods or from the store, the request is being sent to "/"
Is this the correct behavior?
Hi!
I try to set token in the store action:
actions: {
async setAuthToken ({ state, commit }, { authToken, $axios }) {
$axios.setToken(authToken, 'Bearer')
[...]
}But there is an error ReferenceError: value is not defined
About this line of code:
https://github.com/nuxt-community/modules/blob/master/modules/axios/plugin.js#L68
But even if I fix it then there is error here:
https://github.com/nuxt-community/modules/blob/master/modules/axios/plugin.js#L63
Cannot read property 'defaults' of undefined.
When translating the template for the Google Tag Manager module, lodash does not pick up the options passed into the module, due to the formatting being incorrect on the plugin.
For instance:
'<%= options.layer ?>'
Should be:
'<%= options.layer %>'
I just started digging into adding unit test functionality to a Nuxt project. Because vue-loader is in use it looks like my path forward is to work on creating a setup like this: https://vue-loader.vuejs.org/en/workflow/testing.html
I thought I perhaps would put work into making a PR for Nuxt to try and include support for unit testing, but then I just came across this modules repo.
Questions for the community:
when I import axios, It's work
import axios from 'axios'
export default {
asyncData ({ app, params, error }) {
return axios.all([
app.$axios.get(`members/show.json?username=${params.name}`),
app.$axios.get(`topics/show.json?username=${params.name}`)
])
.then(axios.spread(function (user, topicList) {
return {
user: user.data,
topicList: topicList.data
}
}))
.catch(error => console.log(error))
}
}
but when I use "app.$axios.all", like this
return app.$axios.all([
app.$axios.get(`members/show.json?username=${params.name}`),
app.$axios.get(`topics/show.json?username=${params.name}`)
])
throw err app.$axios.all is not a function
so, can I use app.all but not import axios in the component
I see the @nuxt/axios -> plugin.js file, already import axios.
I try use modules in nuxt but erros TypeError: Cannot read property '$axios' of undefined
i try use module https://github.com/nuxt/modules/tree/master/modules/axios
Could you give me a help on how to use the modules in nuxtjs? tanks!
I'm calling axios in the asyncData like so:
const {data} = await context.app.$axios.get('https://api.url')
Getting error on the first page load. In case I'm accessing it again or route push to another page with the same request - it works.
Here is the error log:
@nuxtjs/axios Request:
{ adapter: [Function: httpAdapter],
transformRequest: { '0': [Function: transformRequest] },
transformResponse: { '0': [Function: transformResponse] },
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
validateStatus: [Function: validateStatus],
headers:
{ common: { Accept: 'application/json, text/plain, */*' },
delete: {},
get: {},
head: {},
post: { 'Content-Type': 'application/x-www-form-urlencoded' },
put: { 'Content-Type': 'application/x-www-form-urlencoded' },
patch: { 'Content-Type': 'application/x-www-form-urlencoded' },
host: 'orno.space:3001',
connection: 'keep-alive',
'cache-control': 'max-age=0',
'upgrade-insecure-requests': '1',
'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36',
accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
referer: 'http://orno.space:3001/',
'accept-encoding': 'gzip, deflate, sdch',
'accept-language': 'en-US,en;q=0.8',
cookie: 'G_ENABLED_IDPS=google; fblo_981497855289707=y; modernizr={"flexbox":true}',
'if-none-match': 'W/"380a1-tncBOgy3/aUyzxkcmHX8rAxeYsA"' },
baseURL: 'https://backend.orno.space/wp-json/',
method: 'get',
url: 'https://backend.orno.space/wp-json/cs-rest-api/v1/job' }
[@nuxtjs/axios] Error:
{ Error: Request failed with status code 502
at createError (/var/www/frontend-2/node_modules/axios/lib/core/createError.js:15:15)
at settle (/var/www/frontend-2/node_modules/axios/lib/core/settle.js:18:12)
at IncomingMessage.handleStreamEnd (/var/www/frontend-2/node_modules/axios/lib/adapters/http.js:186:11)
at emitNone (events.js:91:20)
at IncomingMessage.emit (events.js:188:7)
at endReadableNT (_stream_readable.js:975:12)
at _combinedTickCallback (internal/process/next_tick.js:80:11)
at process._tickDomainCallback (internal/process/next_tick.js:128:9)
config:
{ adapter: [Function: httpAdapter],
transformRequest: { '0': [Function: transformRequest] },
transformResponse: { '0': [Function: transformResponse] },
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
validateStatus: [Function: validateStatus],
headers:
{ Accept: 'application/json, text/plain, */*',
host: 'orno.space:3001',
connection: 'keep-alive',
'cache-control': 'max-age=0',
'upgrade-insecure-requests': '1',
'user-agent': 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36',
accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
referer: 'http://orno.space:3001/',
'accept-encoding': 'gzip, deflate, sdch',
'accept-language': 'en-US,en;q=0.8',
cookie: 'G_ENABLED_IDPS=google; fblo_981497855289707=y; modernizr={"flexbox":true}',
'if-none-match': 'W/"380a1-tncBOgy3/aUyzxkcmHX8rAxeYsA"' },
baseURL: 'https://backend.orno.space/wp-json/',
method: 'get',
url: 'https://backend.orno.space/wp-json/cs-rest-api/v1/job',
withCredentials: true,
data: undefined },
response:
{ status: 502,
statusText: 'Bad Gateway',
headers:
{ server: 'nginx',
date: 'Mon, 17 Jul 2017 09:38:28 GMT',
'content-type': 'text/html; charset=UTF-8',
'content-length': '568',
connection: 'keep-alive' },
config:
{ adapter: [Function: httpAdapter],
transformRequest: [Object],
transformResponse: [Object],
timeout: 0,
xsrfCookieName: 'XSRF-TOKEN',
xsrfHeaderName: 'X-XSRF-TOKEN',
maxContentLength: -1,
validateStatus: [Function: validateStatus],
headers: [Object],
baseURL: 'https://backend.orno.space/wp-json/',
method: 'get',
url: 'https://backend.orno.space/wp-json/cs-rest-api/v1/job',
withCredentials: true,
data: undefined },
request:
Writable {
_writableState: [Object],
writable: true,
domain: null,
_events: [Object],
_eventsCount: 2,
_maxListeners: undefined,
_options: [Object],
_redirectCount: 0,
_onNativeResponse: [Function],
_currentRequest: [Object],
_currentUrl: 'https://backend.orno.space' }}
Would you accept a PR for a @nuxtjs/plugin-helper package which will at least contain debug/info functions? At the moment most logging by the plugins are done by calling console.log, but it would be nice if we use the same debug package as nuxtjs uses so all output during build is nicely formatted.
My idea would be to export functions that always add a 'plugin:' text to the logging. And maybe we choose a different colour then nuxt's blue? This way we have an uniform and recognizable way of logging.
const isProd = process.env.NODE_ENV === 'production'
if (isProd) {
const log = () => () => null
const error = () => () => null
module.exports = { log, error }
} else {
const Debug = require('debug')
let instances = {}
const log = (plugin_name) => {
if (!instances['log_' + plugin_name]) {
const log = Debug('plugin:' + plugin_name)
log.enabled = true
log.color = 5
instances['log_' + plugin_name] = log
}
return instances['log_' + plugin_name]
}
const error = (plugin_name) => {
if (!instances['err_' + plugin_name]) {
const error = Debug('plugin:' + plugin_name)
error.enabled = true
error.color = 1
instances['err_' + plugin_name] = error
}
return instances['err_' + plugin_name]
}
module.exports = { log, error }
}and usage would be:
module.exports.meta = require('./package.json')
const debug = require('@nuxtjs/plugin-utils').log(module.exports.meta.name)
const error = require('@nuxtjs/plugin-utils').error(module.exports.meta.name)
log('information about what the plugin is doing during build') // printed in purple
error('oops, something went wrong') // printed in redI am using currently something similar for rfg-icon, but think we could benefit if we centralize the logging :)
Please forgive me if this is a complete duplicate of #27, but while the solution to that problem may have to update the version of nuxt, I'm actually getting this same problem on what looks like up to date versions.
Steps to reproduce on a completely empty folder:
npm init
--followed by filling out the form--
npm install --save nuxt
npm install --save @nuxtjs/google-analytics
package.json was edited to add the dev script, and looks like this:
{
"name": "erase_plz",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "nuxt"
},
"author": "",
"license": "ISC",
"dependencies": {
"@nuxtjs/google-analytics": "^1.0.0",
"nuxt": "^1.0.0-alpha.5"
}
}
nuxt.config.js is created with the following content:
module.exports = {
modules: ['@nuxtjs/google-analytics', { ua: 'UA-XXXXXXX-X' }]
};
So I run npm run dev, and this is the output:
$ npm run dev
> [email protected] dev C:\temp\erase_plz
> nuxt
[nuxt] Module [[object Object]] should export a function
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script 'nuxt'.
The pain point seems to be the modules: ['@nuxtjs/google-analytics', { ua: 'UA-XXXXXXX-X' }] line - because without it, I am at least given the "Couldn't find a `pages` directory. Please create one under the project root" message, which would get me to the rest of the application on other projects.
Am I doing something wrong? Am I missing something? Is there a chance that it's my LTS node version, and the engine property isn't specified in the @nuxtjs/google-analytics package.json file?
After install and add module
modules: [
'@nuxtjs/axios'
]
npm nuxt crashed with message
[nuxt] Unable to resolve module @nuxtjs/axios
[SyntaxError: Unexpected token {]
when I remove this line '@nuxtjs/axios', the project starts correctly. Where is mistake?
Failed response through the proxy resolves instead of a reject when ran from the server.
When returning statuscode 500 with message 'invalid token' from the API, the code below results in user being
{ message: 'Request failed with status code 500', statusCode: 500 }
Expected is that the statusCode is still 500 but
Request failed from invalid tokenRequest Code
try {
let user = await app.$axios.get('/user/me')
console.log('res user', user)
store.dispatch('setCurrentUser', user)
} catch (e) {
console.log('wtf', e)
}
As nuxt.js uses a <nuxt-link/> component instead of <router-link/>, shouldn't the link component in @nuxtjs/bootstrap-vue module use is="nuxt-link" instead of is="router-link"?
As far as I see at the moment it doesnt matter much as <nuxt-link/> does not provide extra functionality. Also this can probably not be fixed without changes in bootstrap-vue?
Telling from the source code, the GA module only sends page views from the router afterEach hook. Will there be support for tracking custom events as in the vue-analytics plugin:
this.$ua.trackEvent('Banner', 'Click', 'I won money!')
All nuxt bundles are served by URLs starting with /_nuxt. But service workers try to fetch them without this prefix. I think it should work with default options.
BTW: I've tried to use modifyUrlPrefix to fix:
modifyUrlPrefix: {
'/': '/_nuxt/'
}but no success
when I use this.$axios.setToken(),It's work
but I want setToken in check-auth.js router middle
import { getUserFromCookie, getUserFromLocalStorage } from '~/utils/auth'
export default function ({ isServer, store, req }) {
// If nuxt generate, pass this middleware
if (isServer && !req) return
const loggedUser = isServer ? getUserFromCookie(req) : getUserFromLocalStorage()
if (loggedUser) {
store.commit('user/SET_TOKEN', loggedUser)
store.$axios.setToken(loggedUser.token)
}
}
the store.$axios.setToken or app.$axios.setToke is not work
my request header don't have auth token
what's the better method when I reload website can use axios.setToken
I'm thinking about full offline support for nuxt powered application. The thing missed out is the following: nuxt page on client-side routing is trying to fetch fresh data over XHR. In offline mode it leads to application error. But we can use SSR generated data instead to display page correctly.
What the best way to solve this issue and is it the workbox module responsibility at all?
Hello,
I just found out that this.$axios has a baseUrl whereas store.$axios has no baseUrl!
Is this a bug?
How to reproduce...
Just make this in some component:
console.log(this.$axios.defaults.baseURL)
console.log(this.$store.$axios.defaults.baseURL)
the first one is undefined, the second one is http://localhost:3000 (in my case)
i have installed @nuxtjs/toast (nuxt version - 1.0.0-alpha.5) and i have exception, but only in terminal, on in browser, because ... full code here
export default {
data () {
console.log(this.$error) // function in browser console, undefined in terminal
return {
loading: 0
}
},
apollo: {
allCars: {
query: gql`query {
projects {
name
}
}`,
loadingKey: 'loading',
error (error) {
console.log(this.loading) // defined everywhere
console.log(this.$error) // function in browser console, undefined in terminal
console.log(error)
// this.$error(error.message) // critical error here, but not in browser
}
}
}
}
Is there a way the setToken functionality could be extended to setHeader ? setToken could still exist but essentially call the setHeader method:
Instead of:
// Set requests token
function setToken (token, type, scopes = 'common') {
if(!Array.isArray(scopes)) {
scopes = [scopes]
}
scopes.forEach(scope => {
if (!token) {
delete this.defaults.headers[scope].Authorization;
return
}
this.defaults.headers[scope].Authorization = (type ? type + ' ' : '') + token
})
}It could be:
// Sets a common header
function setHeader (name, value, scopes = 'common') {
if(!Array.isArray(scopes)) {
scopes = [scopes]
}
scopes.forEach(scope => {
if (!value) {
delete this.defaults.headers[scope][name];
return
}
this.defaults.headers[scope][name] = value
})
}
// Set requests token
function setToken (token, type, scopes = 'common') {
value = !token ? null : (type ? type + ' ' : '') + token
setHeader('Authorization', value, scopes)
}The reason I ask is because I'm implementing a CSRF/XSRF token. The API and Website domains are different which limits my ability to get the cookies from the API on the client-side as the headers are stripped.
To make the cookies more secure, it's better to have them as httpOnly I've read - so instead of using the built-in axios header and cookie XSRF functionality and just setting the cookie in the middleware if isServer is true (with an axios get request), I was wanting to get the value and set the default header. I can't seem to just modify the 'defaults' of the axios object, so instead right now I have to set the default headers into my store and then read them again when I want to use them. Also I'm wanting to add the header X-Requested-With: XMLHttpRequest to every request.
Am I just going about this the wrong way, or would this functionality be useful?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.