登出方法包括简单地调用服务器上的/logout路径，该路径应返回一个带有status属性等于'ok'的对象：

<script>

export default { -- -->

methods: {

async logout () {

const result = await this.$fetch('logout')

if (result.status === 'ok') {

this.$state.user = null

}

},

},

}

</script>

如果用户成功登出，我们会重置全局状态中的user值。

带有导航守卫的私有路由

现在我们已经准备好认证系统，我们可以有不同类型的路由：

公共路由始终可访问

私有路由仅限于已登录用户

访客路由仅对尚未连接的用户可访问

我们将提前创建一个路由组件来测试我们的代码：

让我们创建TicketsLayout.vue组件，稍后我们将用它来显示用户支持票据：

<template>

<main class="tickets-layout">code>

<h1>Your Support tickets</h1>

<!-- TODO -->

</main>

</template>

然后，在router.js文件中添加相应的路由：

import TicketsLayout from './components/TicketsLayout.vue'

const routes = [

// ...

{ path: '/tickets', name: 'tickets',

component: TicketsLayout },

]

最后，在导航菜单中添加到这个新页面的链接：

<router-link :to="{ name: 'tickets' }">code>

Support tickets</router-link>

路由元属性

这就解释了为什么这个函数被称为 <code>next–解析过程将继续，直到我们不再重定向到另一个路由。

这意味着导航守卫可以被多次调用，但这也意味着您应该小心，不要创建无限的解析“循环”！

重定向到想要的路由

用户登录后，应用程序应将其重定向到他们最初想要浏览的页面：

将当前想要的 URL 作为参数传递给登录路由：

next({ -- -->

name: 'login',

params: {

wantedRoute: to.fullPath,

},

})

现在，如果您单击支持票链接并被重定向到登录页面，您应该在任何组件的 $route 对象中看到 wantedRoute 参数：

在 <code>Login 组件中，我们可以在 login 方法中更改重定向，并使用此参数：

this.$router.replace(this.$route.params.wantedRoute ||

{ -- --> name: 'home' })

router.replace() 方法与 router.push() 方法非常相似，不同之处在于它用新路由替换浏览器历史记录中的当前条目，而不是添加新条目。

现在，如果您登录，应该被重定向到支持票务页面，而不是主页。

初始化用户身份验证

当页面加载和应用程序启动时，我们需要检查用户是否已连接。出于这个原因，服务器有一个 /user 路径，如果用户已登录，则返回用户对象。我们将把它放在全局状态中，就像我们已经登录一样。然后，我们将启动 Vue 应用程序：

在 main.js 文件中，从我们的插件中导入 $fetch：

import VueFetch, { $fetch } from './plugins/fetch'

然后，我们需要创建一个名为 main 的新异步函数，在其中我们将请求用户数据，然后启动应用程序：

async function main () {

// Get user info

try {

state.user = await $fetch('user')

} catch (e) {

console.warn(e)

}

// Launch app

new Vue({

el: '#app',

data: state,

router,

render: h => h(AppLayout),

})

}

main()

现在，如果您登录然后刷新页面，您仍然应该保持连接！

访客路由

还有另一种情况我们尚未处理–我们不希望已连接的用户访问登录路由！

这就是为什么我们将其标记为访客路由的原因：

{ path: '/login', name: 'login', component: Login,

meta: { guest: true } },

在 beforeEach 导航守卫中，我们将检查路由是否仅限访客，以及用户是否已连接，然后重定向到主页：

router.beforeEach((to, from, next) => {

// ...

if (to.meta.guest && state.user) {

next({ name: 'home' })

return

}

next()

})

如果您已登录，可以尝试转到登录 URL–您应该立即被重定向到主页！只有在未登录时才能访问此页面。

显示和添加票务

在本节中，我们将向应用程序添加票务支持内容。首先我们将显示它们，然后构建一个表单让用户创建新的票务。我们将为此创建两个组件，嵌套在我们之前创建的TicketsLayout组件中。

不用担心！当您创建您的账户时，一个示例支持票务会自动为您的用户创建。

票务列表

可以在服务器上的/tickets请求票务：

创建一个新的Tickets.vue组件，它将与 FAQ 组件非常相似。

使用RemoteData mixin 来获取票务：

<script>

import RemoteData from '../mixins/RemoteData'

export default {

mixins: [

RemoteData({

tickets: 'tickets',

}),

],

}

</script>

然后添加一个带有加载动画、空消息和票务列表的模板：

<template>

<div class="tickets">code>

<Loading v-if="remoteDataBusy"/>code>

<div class="empty" v-else-if="tickets.length === 0">code>

You don't have any ticket yet.

</div>

<section v-else class="tickets-list">code>

<div v-for="ticket of tickets" class="ticket-item">code>

<span>{ -- -->{ ticket.title }}</span>

<span class="badge">{ -- -->{ ticket.status }}</span>code>

<span class="date">{ -- -->{ ticket.date }}</span>code>

</div>

</section>

</div>

</template>

我们需要一个过滤器来显示票务日期！

终止客户端编译，并使用以下命令安装momentjs：

npm install --save moment

在main.js文件旁边创建一个新的filters.js文件，其中包含一个date过滤器：

import moment from 'moment'

export function date (value) {

return moment(value).format('L')

}

然后在main.js中，导入filters并使用一个方便的循环进行注册：

import * as filters from './filters'

for (const key in filters) {

Vue.filter(key, filters[key])

}

现在我们可以在Tickets组件中以更加人性化的方式显示日期：

<span class="date">{ -- -->{ ticket.date | date }}</span>code>

然后将这个新组件添加到TicketsLayout组件中并获取票务列表：

！

不要忘记导入Tickets并将其设置在components选项中！

会话过期