vue-ssr,页面按需加载，权限控制

一、功能介绍中涉及的知识

vue SSR学习

SSR:服务器端渲染（同构或者通用）
服务器把每个要展示的页面都运行完成后，将运行流直接给浏览器，所有的运算都在服务器端中完成，而浏览器只需要解析HTML即可

1.SSR和SPA

SPA：单页面应用

使用SSR的优势：

• 对SEO（搜索引擎优化）更加友好，
• 内容到达时间（time-to-content）更快，当网络缓慢时，不用等待所有js都下载完成再执行，可以让用户快速看到渲染页面。

SSR的缺点：

• 开发中，针对特定的浏览器，只能使用一部分生命周期钩子函数
• 服务器渲染应用程序时，需要在Node.js server环境运行
• 在node.js中渲染应用程序时，需要占用大量的CPU资源

2.SSR的核心：
通过vue-server-renderer插件的renderToString()方法，把Vue实例转换为字符串插入到html文件中。

“`
const renderer = createRenderer({
template: require(‘fs’).readFileSync(‘./index,template.html’, ‘utf-8’)
})

 renderer.renderToString(app,(err, html) => {
     console.log(html) //html是注入程序内容的部分
 })

“`

3.添加路由功能，分清服务端和客户端的范围
①：创建vue实例的引用文件夹：每次客户端请求都会创建一个新的vue实例

```
export function createApp() {
    const router = createRouter()
    const app = new Vue({
        router,
        render: h => h(App)
    })
    return app
}

```
②：对实例进行路由渲染，返回给客户端

```

export default function creatRouter(){
    let router = new VueRouter({
        mode: 'history',
        router:[
            {
                path: '/home',
                component: require('./router/home.vue')
            },
            {
                //其他引用文件
            }
        ]
    })
}

```
③：服务器端渲染部分
   server.js部分，使用了一个promise回调函数，实例创建完成后，将返回的信息传入渲染器中进行处理，处理结束后，把字符串放入html中返回给客户端

 ```
//响应路由请求
express.get('*', (req, res) => {
    const context = { url:req.url }
    // 创建vue实例传入请求路由信息
    creatApp(context).then(app => {
        renderer.renderToString(app, (err, html) => {
            if (err) {
                return res.state(500).end('运行错误')
            }
            res.send(`
              //插入HTML代码段
            `)
        })
    }, err => {
        if(err.code === 404){
            res.status(404).end('所请求的页面不存在')
        }
    })
})  
//服务器监听
express.listen(8000, () => {
   console.log('已启动')
})
 ```
 ④：创建一个新的vue实例后，通过路由的Push()方法，更改实例的路由状态。

 ```
 export default context => {
     return new Promise((resolve,reject) => {

         const app = createApp()
          //更改路由
         app.$router.push(context.url)
         //获取相应路由下的组件
         const matchedComponents = app.$router.getMatchedComponents()
     })
 }

 ```

4.实现动态的从服务器请求数据

①：增加了一个all函数，把异步请求变为同步，只有当指定任务完成后，vue实例才算是创建完成。遍历请求路由下的组件，通过serverRequest来判断是否需要服务端请求数据，如果需要则执行这个函数，并传入store参数，store是作为vue的vuex的状态管理参数

 export default context => {
         return new Promise((resolve,reject) => {

             const app = createApp()
              //更改路由
             app.$router.push(context.url)
             //获取相应路由下的组件
             const matchedComponents = app.$router.getMatchedComponents()
             //若没有组件，说明路由不存在
             if(!matcheComponents.length) { return reject({ code: 404 }) }

             //遍历路由下的所有组件，如果有需要服务器渲染的请求，则进行请求
             promise.all(matcheComponents.map( component => {
                 if (component.serverRequest) {
                     return component.serverRequest(app.$store)
                 }
             })).then(() => {
                 resolve(app)
             }).catch(reject)
         })
     }

通过Vue的axios来发起请求

export default function creatStore() {
    let store = new Vuex.Store({
        state: {
            homeInfo: ''
        },
        actions: {
            getHomeInfo({ commit }) {
                return axios.get('请求网址').then((res) => {
                    commit('setHomeInfo', res.data)
                })
            }
        },
        mutations: {
            setHomeInfo(state, res) {
                state.homeInfo = res
            }
        }
    })
    return store
}

二、页面的按需加载

产生的原因

当用户没有通过点击跳转到其他页面，只是在主页停留，那就不需要把其他页面资源全部加载，只当用户点击进去的时候在加载

实现

实现路由懒加载

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
    router: [
        {
            path:'/login',
            name:'login',
            component:resolve => require(['@/components/login'], resolve)
        },
        {
            path:'/home',
            name:'home',
            component:resolve => require(['@/components/home'], resolve)
        },
        {
            path:'/skill',
            name:'skill',
            component:resolve => require(['@/components/skill'], resolve)
        },
        {
            path:'/chat',
            name:'chat',
            component:resolve => require(['@/components/chat'], resolve)
        },
    ]
})

对比非懒加载的配置

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'
Vue.use(Router)

export default new Router({
    router: [
        {
            path:'/login',
            name:'login',
            component:login
        },
         {
            path:'/skill',
            name:'skill',
            component:skill,
            children:[
              {
                path:'/chat',
                name:'chat',
                component:chat
              },
            ]
        },
    ]
})

三、权限控制

前端权限控制

• 本质是上是对请求的发起权的控制
• 实现的目标：路由上，用户只能看到自己有权访问的导航栏
  视图上，用户只能看到自己有权浏览的内容和操作的控件
  以及阻止越权请求
• 权限的控制
  
  • 首先需要获取用户的权限数据，可以做一个登录页，登陆后带着用户凭据跳转到前端应用，或者初始化一个只有登录路由的应用，用户登录后动态添加路由。
  • 获取的权限数据包括路由权限和资源权限
  • 路由控制可以只挂载用户拥有的路由，或者初始化挂在所有路由，在每次路由跳转前做检验
  • 视图控制输入用户的权限，输出是否拥有该权限
  • 请求控制，给使用的HTTP库实现一个拦截器，对要发起请求与用户资源权限进行匹配，拦截越权请求

基于vue的方案

- 首先进行用户鉴权，检测用户是否登录，登录后获取一个token，然后在请求头中设置“Authorization”，存在sessionStorage中，页面刷新会获得权限数据，如果本地token失败，后端会返回401，前端跳回登录页面
- 然后进行用户权限初始化，用addRoutes()实现动态路由、全局权限验证、axios请求拦截
- 接着异步加载路由组件后，显示界面

动态菜单

* 把菜单数据挂载根组件上，在首页上用this.$parent.menuData获取
* 菜单生成时，会因为角色的不同而出现名字相同但是功能不同的路由。
  解决方法: 给路由起一个别名，优先显示别名

视图控制

• 全局验证，

  模板
     <div v-if="$_has([people.delete]) @click="people.delete.r()">删除</div>
  
     import * as people from "../api/people";
  

  资源对象示例

    const delete = {
        p: ['delete,/people'],  //资源权限
        r: params => {
            return instance,delete('/people')
        }
    }
    export {
        delete
    }

  自定义has指令:只在元素初始化的时候执行一次

   Vue.directive('has', {
       bind: function(el, binding) {
           if(!Vue.prototype.$_has(binding.value)) {
               el.parentNode.removeChild(el);
           }
       }
   })

  请求控制

利用axios拦截器实现，原理是在请求拦截器中获取本次请求的url和method信息，在和资源权限数据作对比判断是否合法从而决定是否拦截

• 普通请求：可以直接用request.method和request.url来比对

• 带参数的url:后端将url的参数用通配符代替，前端的请求拦截器将带参数的URL处理成和后端一致的格式

  url:/resources/1
  权限：/resources/**
  解释：名词后跟一个参数，参数表示名词ID
  
  url:/store/1/member
  权限：/store/*/member
  解释：中间夹的参数表示第一个名词的ID