6.MidBook项目经验之前端nuxt优化SEO和手机登录,微信登录

1.nuxt服务端渲染技术SSR Server Side Render(ajax异步请求,SEO是靠爬虫抓取数据的,没有抓到数据排名靠后)

1.在用户端搭建(利于SEO) 1.解压后 npm install npm run dev
2.default.vue有 头内容和尾,创建头尾文件,然后加入到组件
3.每个前端系统对应一个单独的后台接口(太方便了,你终于不用写route文件,写繁杂的路由信息了)

2.nuxt路由(固定路由和动态路由[添加变化的数据])

 window.location.href='/hosp';//会跳转到 /hosp/index.vue文件
 //在host文件夹下创建,动态路由文件夹规范  _开头 如  _hoscode.vue
 //会自动找到变量名对应的名字
 window.location.href='/hosp'+hoscode;

3.登录(手机号登录+验证码/微信登录)

 1.网关判断登录状态(后面直接提取到User模块通过GlobalFilter判断全局状态,就不必每次请求都需要登录信息)
 2.加网关路径
 3.判断第一次登录

4.jwt工具生成(token放请求头,方便前端判断) 头信息(加密算法)+用户信息(自己传入)+签名信息(秘钥) 然后base64加密 放非隐私信息

   //token过期时间和秘钥
     1.过程:  登录时生成token,然后与redis存的token对比

//下面的工具类可以根据需要得到对应的值

public class JwtHelper {

    //过期时间24小时内过期
    private static long tokenExpiration = 24*60*60*1000;
    //签名秘钥
    private static String tokenSignKey = "123456";

    //根据参数生成token
    public static String createToken(Long userId, String userName) {
        String token = Jwts.builder()
                .setSubject("USER")
                .setExpiration(new Date(System.currentTimeMillis() + tokenExpiration))//设置过期
                .claim("userId", userId)
                .claim("userName", userName)
                .signWith(SignatureAlgorithm.HS512, tokenSignKey)//加密算法
                .compressWith(CompressionCodecs.GZIP) //压缩
                .compact();
        return token;
    }

    //根据token字符串得到用户id
    public static Long getUserId(String token) {
        if(StringUtils.isEmpty(token)) return null;

        Jws<Claims> claimsJws = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
        Claims claims = claimsJws.getBody();
        Integer userId = (Integer)claims.get("userId");
        return userId.longValue();
    }

    //根据token字符串得到用户名称
    public static String getUserName(String token) {
        if(StringUtils.isEmpty(token)) return "";

        Jws<Claims> claimsJws = Jwts.parser().setSigningKey(tokenSignKey).parseClaimsJws(token);
        Claims claims = claimsJws.getBody();
        return (String)claims.get("userName");
    }

    public static void main(String[] args) {
        String token = JwtHelper.createToken(1L, "lucy");
        System.out.println(token);
        System.out.println(JwtHelper.getUserId(token));
        System.out.println(JwtHelper.getUserName(token));
    }
}

5.手机登录

1. 阿里云短信访问申请签名,模板得到accesskey(点头像)
2. 引入依赖
   

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
</dependency>

3. 创建短信发送模块,需要在启动类exclude datasource,因为不使用数据库连接
4. 写工具类,读取sms的配置信息创建bean对象
5. redisTemplate.opsForValue.get(phone)//得到手机号对应的验证码map .set(phone,code,TimeUnit.MINUTES)
6. 前端(放cookie)直接调用sms模块,往redis存,登录模块判断redis

6.前端vue需要npm装js-cookie才能使用cookie,点击可以直接改值
//!!!head.Vue引入Vue,可以调用全局登录事件,其他页面可以调用

7.用户认证放到网关
在gateway创建类实现GlobalFilter,Ordered

8.OAuth2解决开放系统间授权问题和单点登录(登录一个模块,其他模块不用登录)(就是CA[第三方公司]给我发token,我可以登录其他公司的账户操作)

1. 为什么? 用户密码复制(用户密码给我去访问其他系统)不安全
2. 通用开发者key,开发者和合作者共同开放一个同一的key去访问(我的公司去和百度合作)通常不合适
3. 颁发令牌(百度颁发令牌给我,临时可以使用,需要token)

9.微信扫码登录(理清思路)

1. 前端生成二维码,在页面调用微信地址加上配置信息(从服务器获得)
2. 前端扫码二维码,设置回调地址,微信会返回页面(因为无法调用到本地页面,controller写相同的本地回调页面地址可以解决)
3. 微信返回code给后端,加上秘钥去请求得到临时token,用httpclient(模拟浏览器请求,需要引入依赖)请求微信数据

 使用StringBuffer.append("?aa=%s");
 //占位符 
 String.format(sb.toString,"name");

4. 得到微信用户信息,openid不为空给openid,为空就需要后期绑定手机号