单页应用（SPA）在前端开发中越来越流行。对于一个完整的 SPA 应用，路由权限控制是必不可少的。Vue.js 提供了 Vue Router，通过它，我们可以非常方便地实现路由权限控制。
路由权限控制的目的
路由权限控制的目的是限制用户在未经授权的情况下访问某些页面或操作。例如，在一个电商系统中，用户必须先登录才能访问购物车页面。未登录的用户不能进入购物车页面。
实现路由权限控制的思路
Vue Router 提供了 beforeEach 方法，我们可以在该方法中进行路由权限控制。当用户在访问某个页面前，beforeEach 方法会被调用。我们可以在这个方法中判断用户是否具有访问该页面的权限。如果用户没有权限，我们可以将其重定向到其他页面。
示例代码
这里给出一个简单的示例代码，演示如何利用 Vue Router 实现路由权限控制。
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------ ---- ---- ------------------
------ ----- ---- -------------------
------ ---- ---- ------------------
------------------
----- ------ - -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
--
-
----- --------
----- -------
---------- -----
----- -
------------- ----
-
-
-
----- ------ - --- -----------
----- ----------
----- ---------------------
------
--
---------------------- ----- ----- -- -
-- --------------------- -- -------------- -
--------------
- ---- -
------
-
--
-------- ------------ -
-- ---------------
-- --------- ------------ ---- ----- ----------
------ -----------------------------
-
------ ------- ------在这个示例代码中，我们定义了三个路由：
/：表示首页；/login：表示登录页面；/cart：表示购物车页面。
我们为购物车页面添加了一个元数据 requiresAuth，用来表示该页面需要进行访问权限控制。在 beforeEach 方法中，我们检查用户是否具有访问购物车页面的权限。如果用户已经登录，那么就放行；否则，就将其重定向到登录页面。
在 isLoggedIn 函数中，我们通过检查 localStorage 中是否包含 token 来判断用户是否已登录。实际情况中，我们可以使用任何一种方式来判断用户是否已登录。
总结
本文介绍了利用 Vue Router 实现 SPA 应用的路由权限控制的思路和示例代码。在实际开发中，我们可以根据业务需求和用户角色来自定义路由权限控制，提升应用的安全性和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6523672f95b1f8cacdad2692