how to make router redirect to login when the auth state is kept by store? #3
Comments
|
I make some try like below // router config
Vue.use(VueRouter)
var router = new VueRouter({
saveScrollPosition: true,
history: true
})
router.map({
'/user/login': {
component: Login
},
'/': {
component: Layout,
subRoutes: {
'/index': {
component: Index
},
'/hello': {
component: Hello
}
}
},
'*': {
component: NotFound
}
})
export default router//auth.js
import { LOGIN, LOGOUT } from '../mutation-types'
const state = {
auth: null
}
const mutations = {
[LOGIN] (state, data) {
state.auth = data.auth
},
[LOGOUT] (state) {
state.auth = null
}
}
export default {
state,
mutations
}// store.js
Vue.use(Vuex)
Vue.config.debug = true
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
modules: {
auth
},
strict: debug,
middlewares: debug ? [createLogger()] : []
})//main.js -> the entry
Vue.use(VueResource)
sync(store, router)
router.start(App, '#Entry')and I make auth filter within <template>
<div id="YG_App">
<h1>Hello App!</h1>
<router-view></router-view>
</div>
</template>
<script>
import store from './vuex/store'
export default {
store,
vuex: {
getters: {
auth: ({ auth }) => auth.auth,
route: ({ route }) => route
}
},
created () {
if (!this.auth && this.route.path !== '/user/login') {
store.dispatch('router/ROUTE_CHANGED', {path: '/user/login'})
}
}
}
</script>and it work find..is that a good practice? |
|
+1. Currently state doesn't appear to be available in this router hook. Would need to use a mixin of some kind on the component. I think the way you're doing it is fine, but that does require the component to load before it redirects back to the login page, so it isn't ideal |
|
Hey I was able to get access to the store from inside this hook, but it wasn't pretty: I can't however get access to call actions from within this hook, that's the next step... I would like to run an action and get a response before calling |
|
you are right,,component will be loaded before redirect..I think it is pretty cool can run action within the router hook. when use the router hook inside the component, also work fine, and look more reasonable // login.vue
<script>
import { sessionLogin } from '../vuex/actions'
export default {
vuex: {
getters: {
userInfo: ({ userInfo }) => userInfo
},
actions: {
sessionLogin
}
},
route: {
activate (transition) {
let {session_id} = this.userInfo
if (!session_id) {
// check session from server
this.sessionLogin({
admin_session: {
admin_session_id: session_id
}
}).then((res) => {
// login success, get to index
return transition.redirect('/')
}, (err) => {
// fail to check the session, get to login
return transition.next()
})
} else {
// no session or other auth info, get to login
return transition.next()
}
}
}
}
</script>but the same problem, component is loaded before |
|
In the next breaking release of It does mean that when the hook is called, the component would have already been created. However we will likely introduce some optimization so that by the time the hook is called, the component is in "instantiated" state, but not yet "compiled", so that it's going to be relatively cheap. |
I want store to keep the state of auth or user info, also keep auth state in cookie or localstorage.
when user open the page, try to get the auth from cookie or localstorage and make it into store.
and make router redirect to
loginwhen user not login or can not get auth locally.should I do that within
router.beforeEach? but how could I get thestore.state.authany advice?
The text was updated successfully, but these errors were encountered: