【发布时间】：2018-12-17 21:59:42
【问题描述】：
我在vue-router 中有一些嵌套路由，可以在router.js 中找到。但是，每次我登录用户时，Header 中的Query 和Result 链接总是呈现Register 和Login 组件，但我可以通过调查确认我的Vuex 具有正确的令牌设置通过 vue 开发者工具。
所以我对vue-router 工作的期望如下：
- 用户尝试登录
/user/login - 登录成功，令牌设置为
Vuex状态 - 用户被重定向到
/ - 用户点击
/query或result链接，<router-view>渲染Query或ResultApp.vue中的组件。 - 用户点击
Logout按钮，Vuex状态被清除。 - 用户被重定向回
/user/login。
但我得到的结果是：
- 用户尝试登录
/user/login - 登录成功，令牌设置为
Vuex状态 - 用户被重定向到
/ - 用户点击
/query链接，<router-view>在App.vue呈现Register组件。 - 用户点击
/result链接，<router-view>在App.vue呈现Login组件。 - 用户使用
F5刷新页面。 - 用户点击
/query或result链接，<router-view>渲染Query或ResultApp.vue中的组件。 - 用户点击
Logout按钮，Vuex状态被清除。 - 用户被重定向回
/user/login。 - 用户点击
Login按钮，<router-view>在App.vue渲染Result组件。
我尝试过的
- 删除路由上的令牌保护，
<router-view>仍然无法呈现正确的组件。 - 从所有
<router-link>中删除v-if="auth"，令牌保护仍然打开，问题似乎消失了。但我只想在用户登录时渲染Query和Result，反之亦然。 - 使用
v-show而不是v-if消除此问题，但我怀疑这是对用户隐藏链接的正确方法。 - 命名所有路线，但问题仍然存在。
一些代码
这是我的router.js
import User from './components/user/User'
import Home from './components/Home'
import Login from './components/user/Login'
import Register from './components/user/Register'
import Query from './components/Query'
import Result from './components/result/Result'
import List from './components/result/List'
import Display from './components/result/Display'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
const router = [
{
path: '/', name: 'home', component: Home
},
{
path: '/user', component: User, children: [
{path: 'login', component: Login},
{path: 'register', component: Register},
]
},
{
path: '/query', name: 'query', component: Query
},
{
path: '/result', component: Result, children: [
{path: '', component: List},
{path: ':token', component: Display}
]
},
{path: '*', redirect: '/'},
];
export default new VueRouter({
routes: router,
mode: 'history',
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
}
if (to.hash) {
return {selector: to.hash};
}
return {x: 0, y: 0};
}
})
这是我的Header.vue
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="header">
<a class="navbar-brand" href="#">CMAP</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<router-link to="/user/register" active-class="active" tag="li" v-if="!auth">
<a class="nav-link">Register</a>
</router-link>
<router-link to="/user/login" active-class="active" tag="li" v-if="!auth">
<a class="nav-link">Login</a>
</router-link>
<router-link to="/query" active-class="active" tag="li" v-if="auth">
<a class="nav-link">Query</a>
</router-link>
<router-link to="/result" active-class="active" tag="li" v-if="auth">
<a class="nav-link">Result</a>
</router-link>
<li @click="logout" class="nav-item" v-if="auth">
<a class="nav-link">Logout</a>
</li>
</ul>
</div>
</nav>
</template>
<script>
import * as types from '../../stores/types'
export default {
methods: {
logout() {
// clear state.token and redirect user to '/user/login'
this.$store.dispatch(types.ACTION_USER_LOGOUT);
}
},
computed: {
auth() {
// return true if state.token is set in vuex
return this.$store.getters[types.GETTER_IS_AUTHENTICATED]
}
}
}
</script>
这是我的App.vue
<template>
<div>
<appHeader></appHeader>
<div class="container">
<router-view></router-view>
</div>
<appFooter></appFooter>
</div>
</template>
<script>
import Header from './components/layouts/Header'
import Footer from './components/layouts/Footer'
export default {
components: {
'appHeader': Header,
'appFooter': Footer
}
}
</script>
这是我的store/store.js
import Vue from 'vue';
import Vuex from 'vuex';
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
jwt: {
token: null,
expire: null
},
},
getters,
mutations,
actions,
});
这是我的store/actions.js
import * as types from './types';
import axios from '../axios';
import router from '../router'
export default {
[types.ACTION_USER_LOGIN]: ({commit, dispatch}, payload) => {
axios.post('/api/user/login/', {
email: payload.email,
password: payload.password,
})
.then(res => {
if (Object.keys(res.data).length === 0 && res.data.constructor === Object) {
return
}
let payload = {
'token': res.data.token,
'expire': new Date(res.data.expire_on * 1000)
};
dispatch(types.ACTION_SET_TOKEN, payload);
commit(types.MUTATE_UPDATE_JWT, payload);
router.push('/')
})
.catch(error => {
console.log(error);
})
},
[types.ACTION_USER_REGISTER]: ({commit, dispatch}, payload) => {
axios.post('/api/user/register/', {
email: payload.email,
password: payload.password
}).then(res => {
if (Object.keys(res.data).length === 0 && res.data.constructor === Object) {
return
}
let payload = {
'token': res.data.token,
'expire': new Date(res.data.expire_on * 1000)
};
dispatch(types.ACTION_SET_TOKEN, payload);
commit(types.MUTATE_UPDATE_JWT, payload);
router.push('/')
}).catch(error => {
console.log(error);
})
},
[types.ACTION_USER_LOGOUT]: ({commit, dispatch}) => {
dispatch(types.ACTION_CLEAR_TOKEN);
commit(types.MUTATE_CLEAR_AUTH);
router.push("/user/login");
},
[types.ACTION_CLEAR_TOKEN]: () => {
localStorage.removeItem('jwt_token');
localStorage.removeItem('jwt_expire');
},
[types.ACTION_SET_TOKEN]: ({commit}, payload) => {
localStorage.setItem("jwt_token", payload.token);
localStorage.setItem("jwt_expire", payload.expire);
}
};
这是我的store/getters.js
import * as types from './types';
export default {
[types.GETTER_IS_AUTHENTICATED]: state => {
return state.jwt.token !== null
}
};
这是我的store/mutations.js
从 './types' 导入 * 作为类型；
export default {
[types.MUTATE_UPDATE_JWT]: (state, payload) => {
state.jwt = payload
},
[types.MUTATE_CLEAR_AUTH]: (state) => {
state.jwt.token = null;
state.jwt.expire = null;
},
};
这是我的axios.js 自定义实例
import {store} from './stores/store'
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://127.0.0.1:8000',
withCredentials: true
});
instance.interceptors.request.use(config => {
if (store.state.jwt.token != null) {
config.headers.common['Authorization'] = 'Bearer ' + store.state.jwt.token;
}
return config;
});
export default instance
我的store/types.js包含了所有的常量变量字符串，所以我觉得这里没有必要包含。
如果我需要提供有关该问题的更多信息，请告诉我。
【问题讨论】：
-
你当然需要 - 我们没有看到 Vuex 商店的实现。
-
@IVOGELOV，我在编辑中添加了我的 Vuex 商店实现
-
不确定它是否正确，但您是否尝试在路由器中命名您的路由？
-
@OnurÖzkan 我已尝试命名所有路线，但问题仍然存在。
标签： javascript vue.js vuejs2 vue-component vue-router