{"_id":"@cactus-galaxy/vue-admin-bar","_rev":"1-24f8e13a77572c736673d4c7ab4b41d5","name":"@cactus-galaxy/vue-admin-bar","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@cactus-galaxy/vue-admin-bar","version":"0.0.1","description":"Admin bar","main":"index.js","types":"index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/CactusGalaxy/vue-admin-bar.git"},"keywords":["vue","admin-bar","admin-utils"],"author":{"name":"Oleksandr Moik"},"license":"MIT","bugs":{"url":"https://github.com/CactusGalaxy/vue-admin-bar/issues"},"homepage":"https://github.com/CactusGalaxy/vue-admin-bar#readme","dependencies":{"axios":"^1.6.3","camelcase-object-deep":"^1.1.3","lodash":"^4.17.21","vue":"^2.6.10","vuex":"^3.0"},"gitHead":"fcac1bf252f4bb00722d0e7c5173b2f608cbc3b7","_id":"@cactus-galaxy/vue-admin-bar@0.0.1","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-mr7t9y2gOmGK/RJabhBzkshynDTTYb+E10Vxa/R992Wrrgtrshg3fH6v9QXudscPn4jz2F7kSyiBbX8dj6ilig==","shasum":"d16a448c80b990ff65b77423efa41233447c6ee4","tarball":"https://registry.npmjs.org/@cactus-galaxy/vue-admin-bar/-/vue-admin-bar-0.0.1.tgz","fileCount":8,"unpackedSize":13597,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFmaJ+DBHy+xokdD07bWhC0LpbL+3V6WFcDRCF8dlJgDAiEA+dc6wCVDqUPan13nxFmoJ8kW/ErPTvtA7rRBS9Qyp3M="}]},"_npmUser":{"name":"oleksandr-moik","email":"sashamoik2016@gmail.com"},"directories":{},"maintainers":[{"name":"oleksandr-moik","email":"sashamoik2016@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-admin-bar_0.0.1_1703783557385_0.4379310994150005"},"_hasShrinkwrap":false},"0.1.0":{"name":"@cactus-galaxy/vue-admin-bar","version":"0.1.0","description":"Admin bar","main":"index.js","type":"module","types":"index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 0"},"repository":{"type":"git","url":"git+https://github.com/CactusGalaxy/vue-admin-bar.git"},"keywords":["vue","admin-bar","admin-utils"],"author":{"name":"Oleksandr Moik"},"license":"MIT","bugs":{"url":"https://github.com/CactusGalaxy/vue-admin-bar/issues"},"homepage":"https://github.com/CactusGalaxy/vue-admin-bar#readme","dependencies":{"axios":"^1.6.3","camelcase-object-deep":"^1.1.3","lodash":"^4.17.21","vue":"^2.6.10","vuex":"^3.0"},"gitHead":"846cd8b8cbf1ea8f710e90be336622d0e856748d","_id":"@cactus-galaxy/vue-admin-bar@0.1.0","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-1UqfLIUJrJEHzThEAwuNlePXam7kK3QCE8MnQ5E+T0V32X4XMSByIH8knDv5008JDCx8iCAPG/EoI8neHxu4Jg==","shasum":"842e6ad0faa183a15a1b21b3f6b606f3c3731af9","tarball":"https://registry.npmjs.org/@cactus-galaxy/vue-admin-bar/-/vue-admin-bar-0.1.0.tgz","fileCount":11,"unpackedSize":15047,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXP7SU8FqVj0okrnJBxB0qY54fPKm6L69Y4AGpPoO3owIhAMSD24oMsvRHV8HYbTfjrGkpFogV+TSdugi5Dos7905A"}]},"_npmUser":{"name":"oleksandr-moik","email":"sashamoik2016@gmail.com"},"directories":{},"maintainers":[{"name":"oleksandr-moik","email":"sashamoik2016@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-admin-bar_0.1.0_1703798434815_0.41216481756401935"},"_hasShrinkwrap":false}},"time":{"created":"2023-12-28T17:12:37.260Z","0.0.1":"2023-12-28T17:12:37.570Z","modified":"2023-12-28T21:20:35.175Z","0.1.0":"2023-12-28T21:20:34.987Z"},"maintainers":[{"name":"oleksandr-moik","email":"sashamoik2016@gmail.com"}],"description":"Admin bar","homepage":"https://github.com/CactusGalaxy/vue-admin-bar#readme","keywords":["vue","admin-bar","admin-utils"],"repository":{"type":"git","url":"git+https://github.com/CactusGalaxy/vue-admin-bar.git"},"author":{"name":"Oleksandr Moik"},"bugs":{"url":"https://github.com/CactusGalaxy/vue-admin-bar/issues"},"license":"MIT","readme":"# Admin bar\n\nAdmin bar is a plugin for Vue.js that adds a simple admin bar to your application.\n\n## Features\n\nQuickly navigate to the admin panel, edit the current page and more.\n\n- Show admin bar for users with admin rights\n- Show links to the admin panel and other links from the backend\n- Show links to edit current page/article/post/resource\n\n## Requirements\n\n- Vue.js 2\n- Vuex 3\n\n## Installation\n\n### NPM\n\n```bash\nnpm install @cactus-galaxy/vue-admin-bar --save\n```\n\n## Usage\n\n### Connect store\n\n**IF** your App already has a Vuex store, you need to pass it to the plugin\n\n```js\nimport Vue from 'vue';\nimport VueAdminBar from '@cactus-galaxy/vue-admin-bar';\nimport store from './path-to-your-store/store';   // your Vuex store\n\nVue.use(VueAdminBar, {\n  store,\n});\n```\n\n**ELSE** you need to create a new Vuex instance for the package\n\n```js\nimport Vue from 'vue';\nimport Vuex from 'vuex';\nimport VueAdminBar from '@cactus-galaxy/vue-admin-bar';\n\nVue.use(Vuex);\n\n// create Vuex store, if you don't have it\nconst store = new Vuex.Store();\n\nVue.use(VueAdminBar, {\n  store,\n});\n```\n\n`The application store module will be registered under the namespace 'adminBar'`\n\n### Connect http-client (Axios)\n\n> Currently only Axios is supported\n\nWe recommend creating one [axios instance](https://axios-http.com/docs/instance) and using it across the whole application and in stores.\nFrom requests, we grab admin data via [interceptors](https://axios-http.com/docs/interceptors) and pass it to the admin bar store.\n\nYou may use the next setup for the Axios instance. Create file `src/utils/http.js`, configure axios instance and then export it.\n\n```js\nimport Vue from 'vue';\nimport axios from 'axios';\nimport VueAxios from 'vue-axios';\nimport camelcaseObjectDeep from \"camelcase-object-deep\";\n\nexport const $http = axios.create({\n  baseURL: process.env.VUE_APP_ROOT_API,\n  headers: {\n    'Accept': 'application/json',\n  }\n});\n\nconst getUserAuthToken = function () {\n  return localStorage.getItem('user_token');\n}\n\n// configure request interceptor\n$http.interceptors.request.use(() => {\n  // add token to request headers\n  const token = getUserAuthToken();\n  if (token) {\n    config.headers['Authorization'] = `Bearer ${token}`;\n  }\n\n  return config;\n});\n\n// configure response interceptor\n$http.interceptors.response.use(\n  (response) => {\n    response.data = camelcaseObjectDeep(response.data);\n\n    return response;\n  },\n  (error) => {\n\n    // handle errors\n\n    return Promise.reject(camelcaseObjectDeep(error.response));\n  }\n);\n```\n\nAnd then use this instance in `main.js` and in stores for making requests\n\n```js\nimport Vue from 'vue';\nimport App from './App.vue';\nimport router from './router';\nimport store from './store';\n\nimport VueAdminBar from \"vue-admin-bar\";\nimport {$http} from \"@/utils/https\";\n\nVue.use(VueAdminBar, {\n  axios: $http,\n  store\n})\n```\n\nFor requests, where we need, from backend api append next structure. If you make multiple requests, all **links** will be stacked.\n\n```json\n{\n  \"data\": [],\n  \"adminData\": {\n    \"adminDashboard\": {\n      \"url\": \"https://admin.example.com/admin\",\n      \"title\": \"Dashboard\"\n    },\n    \"links\": [\n      {\n        \"url\": \"https://admin.example.com/admin/products/1/edit\",\n        \"title\": \"Edit this product\"\n      }\n    ]\n  }\n}\n```\n\nLinks will be reset after each route change.\n\n### Add to template\n\nNow vue component is registered and you can use it in your app\n\n```html\n\n<template>\n  <div>\n    <!--...-->\n    <admin-bar/>\n    <!--...-->\n  </div>\n</template>\n```\n\nNext, we need to detect which user have access to admin bar. For example, we have an action in `profile` store which fetches user info:\n\n```typescript\n// profile/actions.ts\nimport $http from \"@/utils/http\";\n\nexport default {\n  // other actions\n  // ...\n  fetchUserData: async ({commit}: ActionContext<State, RootState>) => {\n    const response = await $http.get<{ data: User }>('v1/auth/me');\n\n    const loggedInUser = response.data.data;\n\n    commit('setUserData', loggedInUser);\n\n    return response;\n  }\n  // ...\n}\n```\n\nWe need to call `adminBar/setCanBeRendered` and pass the state of the user access rights. For simplicity, we check `canSeeAdminHeader`\n\n```diff\n    const loggedInUser = response.data.data;\n+    commit('adminBar/setCanBeRendered', loggedInUser.canSeeAdminHeader, {root: true})\n\n    commit('setUserData', loggedInUser);\n```\n","readmeFilename":"README.md"}