Vue 2.0 about vue-auth HOT 43 CLOSED

Just started upgrading my app to Vue 2 and the auth property in the routes doesn't seem to be taking affect anymore - I'm able to view routes that should require authentication without being authenticated.

According to the vue-router docs, any 'custom' props should now be contained within a meta prop - I've tried both leaving the auth prop at the 'root' of the route, as well as moving it to within the meta prop with no joy - any pointers to get this working again?

from vue-auth.

yes, makes sense, let me test this.

from vue-auth.

The PR has been merged, it's looking pretty solid now, thx :-)

from vue-auth.

Make sure to grab v1.3.0-beta for latest.

from vue-auth.

Gonna close this off, as it seems version 2 support is quite stable now. Any separate concerns can go in new issues now.

Thx to everyone for help here :-)

from vue-auth.

Haven't tested it yet so no idea. But I'm currently in the middle of an
overhaul which will support all versions much easier.

Hopefully early next week it will be out.

Rob

On Sep 7, 2016 09:35, "Maciek Lamberski" [email protected] wrote:

Hi Rob,

Does vue-jwt-auth work with Vue 2.0? I've been trying to make it work but
without any luck.

Uncaught TypeError: Cannot read property 'router' of undefined

Above error is displayed when I run below code:

import Vue from 'vue/dist/vue'import VueRouter from 'vue-router'import VueResource from 'vue-resource'import VueAuth from 'vue-jwt-auth'
Vue.use(VueRouter)Vue.use(VueResource)
var router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
auth: true,
component: require('./pages/Home.vue')
},
{
path: '/login',
name: 'login',
component: require('./pages/Login.vue')
}
]
})
Vue.use(VueAuth, {}, router)
const app = new Vue({
router,
template: <router-view></router-view>
}).$mount('#app')

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#15, or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy8xjKD_6hhBcKOpad8b_AbN2UQkrks5qnr2cgaJpZM4J27KI
.

from vue-auth.

That's great! Looking forward to the new version.

from vue-auth.

Any update on the new version? Looking forward to using this on a new project with Vue2.

from vue-auth.

Hey, it's planned for today :p

On Sep 13, 2016 22:52, "jeffcj" [email protected] wrote:

Any update on the new version? Looking forward to using this on a new
project with Vue2.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#15 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy0tP6sb3J9DYCB66JOyJ1n0u45Vmks5qp2FYgaJpZM4J27KI
.

from vue-auth.

Great! Thanks! Appreciate your hard work on this. It will definitely save me some time.

from vue-auth.

Hey, do you have a working sample with Vue 2? I can't even get a simple hello world going.

I put in the latest vue-loader, vue-router, vue-resource and vue and it's just full of errors and blank screens.

Doesn't seem like 2.0 is ready for anything yet.

from vue-auth.

Yes, I do have some working boilerplate. Give me some time to get back to my desk and I'll publish for you.

from vue-auth.

@websanova Basic demo from vue-router examples (used vue-cli to bootstrap) https://github.com/jeffcj/vue2demo

from vue-auth.

Ok, well seems to be an issue with the vue-router for now. I've opened an issue for it:

vuejs/vue-router#659

However, you should also update to the latest version I pushed today @websanova/vue-auth v1.0.5-dev.

To pass the router in now it's just an option.

Vue.use(require('@websanova/vue-auth'), {
    router: router
});

You'll end up seeing that same error in the issue with the push function error.

from vue-auth.

@websanova Is this helpful?

"The router instance will be available in all descendants of the root instance as this.$router."

Not sitting at my computer so I can't review code at the moment. Not sure if that applies where you're calling router.beforeEach.

from vue-auth.

At a basic level beforeEach is working.

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', component: Home },
  ]
})

router.beforeEach(function() {console.log('I am before each');})

Works as intended.

from vue-auth.

Ya, but something strange going on here...

from vue-auth.

I have noticed that the router passed in through the option is not the same router object you get when you look at the router object within your plugin code (just doing some console logging). I'm not sure why...

from vue-auth.

Ok, almost there, try the latest v1.0.8-dev. Everything seems to be working for the most part.

However, I see that the router.go is doing a page refresh. Did they change something in 2.0?

from vue-auth.

Apparently so. .go now seems to be a history position.

//2.x


      go (n: number) {
        this.history.go(n)
      }

..and

//1.x
go (path) {
        let replace = false
        let append = false
        if (Vue.util.isObject(path)) {
          replace = path.replace
          append = path.append
        }
        path = this.stringifyPath(path)
        if (path) {
          this.history.go(path, replace, append)
        }
      }

from vue-auth.

Seems it's router.push now.

from vue-auth.

Ok, I added a tweak to use push if it's available and default to go otherwise. Seems to be good now, make sure you grab the latest.

Let me know if any other issues come up.

from vue-auth.

Hmm, will have to test it..

On Wed, Oct 12, 2016 at 2:18 PM, Jacob Piers-Blundell <
[email protected]> wrote:

Just started upgrading my app to Vue 2 and the auth property in the
routes doesn't seem to be taking affect anymore - I'm able to view routes
that should require authentication without being authenticated.

According to the vue-router docs, any 'custom' props should now be
contained within a meta prop - I've tried both leaving the auth prop at
the 'root' of the route, as well as moving it to within the meta prop
with no joy - any pointers to get this working again?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#15 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcyxYCJeEdsviLViBk24cSf_1OCisbks5qzInggaJpZM4J27KI
.

from vue-auth.

i think add method getRouteAuth in auth.js options for custom extend it
getRouteAuth(transition){
//v1
return (transition.to || transition).auth;
//v2
return transtion.meta.auth;
}

from vue-auth.

This project had been moved to

https://github.com/websanova/vue-auth

Make sure you get the latest there.

On Oct 14, 2016 4:14 PM, "让你笑了" [email protected] wrote:

i think add method getRouteAuth in auth.js options for custom extend it
getRouteAuth(transition){
//v1
return (transition.to || transition).auth;
//v2
return transtion.meta.auth;
}

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#15 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy6lnNoSzGoBf-idsMloW0ekYNYMGks5qz0fpgaJpZM4J27KI
.

from vue-auth.

yeah , i get it

like @kubacode say , custom props must in meta

Router Meta Fields

so , i think edit the code
https://github.com/websanova/vue-auth/blob/master/src/drivers/vue.1.0.0.js#L78

from vue-auth.

Yes, I seen that as well, that all the "custom" stuff is in meta now, I will update for it to check in here shortly .

from vue-auth.

so i want add a method in auth.js for custom extend it
getRouteAuth(){}

and edit L78 in driver..js
transitionEach.call(_this,(transition.to|| transition).auth, function () { (next || transition.next)(); });
to
transitionEach.call(_this, this.options.getRouteAuth(transition), function () { (next || transition.next)(); });

from vue-auth.

This code is already in the driver file, so I don't think it needs to be
broken down further. Probably I will just add a vue 2.0.0 driver so that
there can be separate code streams.

If you need it working now, just override the _beforeEach method
altogether.

_beforeEach: function (routerBeforeEach, transitionEach) {
    var _this = this;

    this.options.router.beforeEach(function (transition, location,

next) {
routerBeforeEach.call(_this, function () {
transitionEach.call(_this, (transition.to ||
transition).auth, function () { (next || transition.next)(); });
});
})
},

On Tue, Oct 18, 2016 at 1:49 PM, 让你笑了 [email protected] wrote:

so i want add a method in auth.js for custom extend it
getRouteAuth(){}

and edit L78 in driver..js
transitionEach.call(_this,(transition.to|| transition).auth, function ()
{ (next || transition.next)(); });
to
transitionEach.call(_this, this.options.getRouteAuth(transition),
function () { (next || transition.next)(); });

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#15 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy0tQiU2SVtmjsW6UrTmdkkyJ4CoRks5q1GwHgaJpZM4J27KI
.

from vue-auth.

I've just pushed an update here v1.1.1-beta.

So now it will check for meta.auth first: (transition.meta || {}).auth || (transition.to || transition).auth.

from vue-auth.

yeah,i konw override the method
thank you

I also met another proble

I set a router auth = true , and direct input URL enter the router ... i get error
Uncaught TypeError: Cannot read property 'replace' of undefined

and i found has a issue in vue-router vuejs/vue-router#795

Have you ever had this problem, and have a solution?

I have to override method __routerReplace and __routerGo
eg:
setTimeout(()=>this.options.router.replace(data))

Seems to be good now...

from vue-auth.

that's great new version!

and It's work fine!

from vue-auth.

I forked the repo and I am working on it to add router v2.x support. Will keep you in the loop!

from vue-auth.

Hi @HashemQolami , Did you found a way to solve the history problem?

from vue-auth.

Nope, didn't look into that yet.

On Oct 18, 2016 15:32, "让你笑了" [email protected] wrote:

Hi @HashemQolami https://github.com/HashemQolami , Did you found a way
to solve the history problem?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#15 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy1jEIjKXCEuPCFCXkYrCbuETkwqRks5q1IQQgaJpZM4J27KI
.

from vue-auth.

@websanova @wennercn Just sent a PR. Tested in my own project with Vue@2 and VueRouter@2 and everything seems to be working fine, no bugs yet.

from vue-auth.

I will have to setup a separate vue2 demo in the code base (so both 1 and 2
can be tested simultaneously). I seen your PR, but can't it just do
transition.meta.auth directly on a transition?

On Tue, Oct 18, 2016 at 4:40 PM, Hashem Qolami [email protected]
wrote:

@websanova https://github.com/websanova @wennercn
https://github.com/wennercn Just sent a PR
#36. Tested in my own project
with Vue@2 and VueRouter@2 and everything seems to be working fine, no
bugs yet.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#15 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy-PLs7SRnKpBlwnlNZizO2NINdEHks5q1JQmgaJpZM4J27KI
.

from vue-auth.

@websanova

I seen your PR, but can't it just do
transition.meta.auth directly on a transition?

Say we have /foo/bar route in the route config, which does NOT have any meta properties, while there is a auth: true set on the parent route, the /foo.

In that scenario we want the auth rule to be applied to the /foo/bar as well and not to repeat ourselves. But the transition.meta would be empty as there is no meta property set on the bar. So we have to iterate over the matched routes which includes the /foo as well to find the last route in the list having a meta.auth in place.

from vue-auth.

Are you talking about dealing with sub routes here?

On Tue, Oct 18, 2016 at 6:05 PM, Hashem Qolami [email protected]
wrote:

@websanova https://github.com/websanova

I seen your PR, but can't it just do
transition.meta.auth directly on a transition?

Say we have /foo/bar route in the routr config, which does NOT have any
meta properties, while there is a auth: true set on the parent route, the
/foo.

In that scenario we want the auth rule to be applied to the /foo/bar as
well and not to repeat ourselves. But the transition.to.meta would be
empty as there is no meta property set on the bar. So we have to iterate
over the matched routes which includes the /foo as well to find the last
route in the list having a meta.auth in place.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#15 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcyzE84qrWiIpbWMDD8W9VNsvnmfyMks5q1Kf4gaJpZM4J27KI
.

from vue-auth.

@websanova Yes, consider the following:

  {
    path: '/foo',
    name: 'foo',
    component: MasterView,
    meta: {
      auth: true
    },
    children: [
      {
        path: '',
        component: Foo
      },
      {
        path: 'bar',
        name: 'bar',
        component: Bar
      },
      {
        path: ':others',
        component: Others
      }
    ]
  },

In that case we don't have to repeat the auth meta property for every single nested route.

But if one of the nested routes needs a different auth value, it can override the parent's one.

from vue-auth.

I guess children can have children though, so this may need to be a recursive check up to the parent.

from vue-auth.

@websanova It does not need a recursive check as the transition.matched Array is flatten with nested routes.

For instance for the /foo/bar/baz route, the matched array would have 3 items, each represents one level of matched routes: /foo, /foo/bar, /foo/bar/baz.

I suggest continuing the discussion in the PR page. Shall I update the PR with the new commits you have done so that it can be merged?

from vue-auth.

I’ll be starting a admin kind of admin today, based on 2.0, so I’ll most likely refer to this thread later. I can also test/contribute somehow, just let me know where I can help.

from vue-auth.