重读vue电商网站26之路由导航守卫控制访问权限

如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。

在之前的操作中，我们登录之后会种植一个 token 值，表示我们登录成功了，那么此时我们将 token 值去掉呢？

直接点击上述 clear all 按钮去掉之后，我们依旧是可以访问 /home的路由，没有登录也能访问我们的后台主页，这肯定不是我们想要的结果。

在 router/index.js 中进行相关配置，具体如下，调用路由实例 router的 beforeEach方法，即可挂载我们的路由导航守卫

。

    这里可能会有疑问，我们需要验证 token的正确性吗？
    答案是不需要，因为前端只需要管要不要给用户呈现这个页面，而我们调用api时，后端会对我们的 token 值进行校验，前端不需要验证。

退出功能

基于 token 的方式实现退出比较简单，只需要销毁本地的 token 即可。这样，后续的请求就不会携带 token ，必须重新登录生成一个新的 token 之后才可以访问页面。

那么，我们仅需要为退出按钮绑定一个事件即可。

然后事件内容就是：先清空 token，然后跳转到我们的登录页面。

核心代码如下：