路由（三）路由-编程式导航-前置路由守卫

路由-编程式导航-介绍

导航：变换浏览器#锚点信息，使得一个组件显示出来，这个过程就是导航

• 声明式导航：router-link可以编译生成超链接按钮，单击按钮就显示对应的组件，这个称谓“声明式导航”
• 编程式导航：有时由于业务需要，一个组件被显示其实并不方便通过按钮单击实现，相反是要通过程序代码的方式给显示出来，就是“编程式导航”

编程式导航的实现：

路由对象.push(锚点信息，不带#号)   // 根据锚点执行指定的路由
路由对象.back()  // 返回
路由对象.forward()  // 前进

在组件实例中 路由对象======= this.$router

路由-编程式导航-简单使用

目标：给电影详情页面设置返回按钮，单击可以返回列表页面

路由-守卫-介绍

守卫：每个路由在执行的时候都会经历一些"关卡"，关卡根据业务要求可以做决定是否执行当前路由 或 执行其他路由 或 停止执行，这个关卡就是守卫

相关的守卫有很多，我们要学习使用的路由名称为“前置路由守卫”

这个路由特点：所有的路由在执行之前要会经过该守卫

为什么使用守卫：

答：在项目中，每个路由根据情形不一样，有时会让显示对应的组件，有时不让显示，这个让或不让就是路由守卫来做判断，例如后台首页面组件要求只有处于登录状态才可以访问，判断是否登录就是守卫做的工作

路由-守卫-简单使用

要使用的守卫 是前置路由守卫

特点：所有的路由都会执行

使用示例：

WebStorage-介绍

WebStorage的实现具体分为两种：

• localStorage（本地存储）：持久存储
• sessionStorage（会话存储）：会话级(临时)存储，数据是临时的(关闭浏览器或关闭浏览器标签都会造成数据丢失)

各自特点为：

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。除非主动删除数据，否则数据永远不会消失

sessionStorage的生命周期是在仅在当前会话下有效，只要这个浏览器标签窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在，关闭了浏览器标签窗口后就会被销毁

应用场景：

localStorage：用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。

sessionStorage：敏感账号一次性登录

WebStorage-简单使用

路由-案例-强制登录

目标：

实现一个简单用户登录后台系统的业务逻辑

通过“sessionStorage”记录当前用户登录状态

通过“路由守卫”判断当前用户是否处于登录状态，并决定是否可以访问后台页面

步骤：

1. 在components目录创建业务组件 Home.vue 和 Login.vue

2. 在main.js中 给业务组件做 引入、注册路由 事宜

3. 在Login.vue中绘制登录form表单，用户名密码双向数据绑定，methods方法实现登录导航

4. 记住管理员的登录状态，用户一旦登录系统，后端服务器要给前端返回一个标志信息(胸牌)，前端要在浏览器中把这个标志信息存储起来用以表明我们处于登录状态，如果浏览器中没有这个标志信息，就是退出状态的

   (学员的胸牌)

   登录标志信息专业术语名称：token秘钥信息

   暂时模拟登录解决：(登录系统的时候)自己创建一个token秘钥信息，存储给浏览器即可

   在Login.vue中通过window.sessionStorage(token,xxx) 实现浏览器存储登录秘钥信息

   示例：

5. 一旦token消失，用户已经退出系统，就禁止访问后台首页，相反还要强制去访问登录页面

   (具体在路由守卫处实现判断处理)

   实现示例：

小结：

1. 业务组件 Home.vue Login.vue
2. 登录状态：Login.vue登录系统通过sessionStorage模拟存储token秘钥数据
3. 判断非登录状态禁止访问后台页面： main.js 路由守卫