Angular+Supabase部署Vercel：HashLocationStrategy致重定向失效及404解决问询

最优解：不用Hash模式，直接搞定Vercel刷新404 #

Angular是单页应用，刷新非首页时Vercel会默认找对应路径的静态文件，找不到就返回404。不用改路由策略，加个Vercel配置文件就能解决：

1. 在Angular项目根目录新建vercel.json，内容写死如下：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

2. 把项目重新部署到Vercel，之后不管刷新哪个路由都不会404，路由还是正常的HTML5模式（不带#）。
3. 把之前加的{ provide: LocationStrategy, useClass: HashLocationStrategy }配置删掉，Angular默认用的PathLocationStrategy就够用。
4. 恢复Supabase注册代码里的emailRedirectTo为正常路径：

return database.auth.signUp({
  email: user.email,
  password: user.password,
  options: {
    emailRedirectTo: '???.vercel.app/welcome/',
  },
}); 

这样点邮箱确认链接后，Supabase的会话参数会被正常处理，自动完成登录，密码重置这类场景也能正常获取会话。

备选方案：如果非要用Hash模式，修复认证跳转 #

要是必须保留Hash路由，得调整Supabase的配置和代码：

1. 去Supabase控制台，找到Authentication > URL Configuration，把Site URL改成带#的根路径，比如https://???.vercel.app/#/。
2. 注册代码里的emailRedirectTo改成完整的Hash路径：

return database.auth.signUp({
  email: user.email,
  password: user.password,
  options: {
    emailRedirectTo: 'https://???.vercel.app/#/welcome/',
  },
}); 

3. 最后在welcome页面的组件初始化时，手动触发Supabase的会话校验：

import { Component, OnInit } from '@angular/core';
import { SupabaseService } from '../supabase.service';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {

  constructor(private supabase: SupabaseService) { }

  ngOnInit(): void {
    // 手动拉取会话，处理自动登录
    this.supabase.auth.getSession().then(({ data: { session } }) => {
      if (session) {
        // 这里写登录后的逻辑
      }
    });
    // 或者监听认证状态变化
    this.supabase.auth.onAuthStateChange((event, session) => {
      if (session) {
        // 处理登录后的逻辑
      }
    });
  }

}

不过这个方案步骤多，不如第一种省事，优先选方案一。

内容的提问来源于stack exchange，提问作者krabochki