怎么用vue设置保护页面？（需要对应权限才可访问）

用vue设置保护页面（需要对应权限才可访问）

我们在用vue开发时有些页面是需要进行保护的，等有了相关权限后才可以进行访问。
举个例子，像个人中心这样的网页，如果我们不设置保护，那么用户不登录也可以通过网址的方式进行访问，这样就很不好了，所以我们今天来看看如何设置保护页面。

路由配置

既然要访问页面，当然得从路由先配置好地址了。
我这里弄了三个页面，个人中心(myselif)，另一个保护页面(stopCom)，加载授权页面(coming)。
因为个人中心和保护页面是需要进行额外加持防护的，所以我们给它一个特有的属性 auth

在主函数中对保护页面做处理，router.beforeEach 即切换地址前需要做的操作
首先判断是否有 auth 的值，没有的话就是普通页面可以直接跳转，有的话需要判断是否正在加载，
若是在加载先把地址切换到授权加载页面， query: returnurl:to.fullPath 是保存你所想跳转的地址，
这是为了方便同一权限拥有多个保护页面，这样就能通过其后面地址不一样进行精确跳转。
再判断vuex中的该数据是否存在即是否通过验证，通过则data数组是有值的。
没通过验证则跳转到登录页面。

加载授权页面ing

监听vuex中的data 和 isloading 是否改变，对其改变做处理。
正在加载 ： 不执行
加载完成 授权成功 ：看是否网址后有之前对应的query returnurl 的值 有则跳转到该页面，没有则跳转到个人中心页面
加载完成 授权失败：跳转到登录页 重新登录

给用户名加一个跳转地址

效果

点击用户名跳转了！

没登录时 在网址上输入该网址 跳转到登录页面了


退出登录也会回到登录页面哦。
这样我们的保护页面就做好了，如果是不同权限的话则需要自己给其加上特有属性再做一些配置，节能达到效果了。
点个赞吧，米娜~~